响应式布局实例2

xiaodai8580 5年前 (2019-09-20) 725℃ 0次吐槽

响应式布局实例2

响应式网页，只用CSS也能实现响应式网站的布局。

通过媒体查询设置不同的断点，为不同的视图宽度指定不同的css规则，让浏览器根据指定的视图宽度渲染页面，来实现响应式布局。

可以根据需要，添加任意多个媒体查询断点，例如，希望在视口宽度小于等于980px时，将body背景设置为红色显示。

CSS中的媒体查询，设置断点。

使用@media 的三种方式：

第一：直接在CSS文件中使用

@media 类型 and (条件1) and (条件二){

css样式

}

@media screen and (max-width:980px ) {

body{

background-color: red;

}

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: skyblue;
			}
			@media only screen and (max-width: 980px){
				body{
					background-color: red;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

预览效果如下所示:

第二：使用@import导入

@import url("css/index.css") all and (max-width:980px);

第三：也是最常用的：使用link连接，media属性用于设置查询方式

我们需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式。

需要大家牢记几点：

viewport

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

----------------------------------------------------------------------------------------------

width=device-width

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

----------------------------------------------------------------------------------------------

initial-scale=1

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

----------------------------------------------------------------------------------------------

user-scalable=no

user-scalable：用户是否可以手动缩放。

----------------------------------------------------------------------------------------------

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

下面制作一个响应式布局页面

htmlcss：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			#head,#main,#foot{
				width: 1200px;
				height: 100px;
				line-height: 100px;
				background-color: goldenrod;
				margin: 0 auto;
				font-size: 48px;
				text-align: center;
			}
			#head div{
				width: 100px;
				height: 30px;
				line-height: 30px;
				background-color: green;
				font-size: 20px;
				margin-top: 35px;
				float: right;
				display: none;
			}
			#head ul{
				width: 80%;
			}
			#head ul li{
				width: 20%;
				text-align: center;
				list-style-type: none;
				font-size: 20px;
				float: left;
			}
			#main{
				height: auto;
				margin: 10px auto;
				overflow: hidden;
			}
			.left,.center,.right{
				width: 20%;
				height: 600px;
				line-height: 600px;
				background-color: red;
				float: left;
			}
			.center{
				width: 60%;
				box-sizing: border-box;
				border-left: 10px solid #fff;
				border-right: 10px solid #fff;
			}
			@media only screen and (max-width: 1200px) {
				#head,#main,#foot{
					width: 100%;
				}
			}
			@media only screen and (max-width: 980px) {
				.left{
					width: 30%;
				}
				.center{
					width: 70%;
					border-right: hidden;
				}
				.right{
					display: none;
				}
			}
			@media only screen and (max-width: 640px) {
				.left,.center,.right{
					width: 100%;
					height: 200px;
					line-height: 200px;
					display: block;
				}
				.center{
					height: 600px;
					line-height: 600px;
					border: hidden;
					border-top: 10px solid #fff;
					border-bottom: 10px solid #fff;
				}
				#head ul{
					display: none;
				}
				#head div{
					display: block;
				}
			}
		</style>
	</head>
	<body>
		<header id="head">
			<ul>
				<li>header1</li>
				<li>header2</li>
				<li>header3</li>
				<li>header4</li>
				<li>header5</li>
			</ul>
			<div>icon</div>
		</header>
		<section id="main">
			<div class="left">
				left
			</div>
			<div class="center">
				center
			</div>
			<div class="right">
				right
			</div>
		</section>
		<footer id="foot">
			footer
		</footer>
	</body>
</html>