响应式布局实例4

响应式布局实例4

响应式布局在头部head中一定要添加

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

申明网页可以缩小、放大。

注意屏幕的宽度几个参考断点：

超小屏幕（手机，小于768px）

小屏幕（平板，大于等于768px）

中等屏幕（桌面显示器，大于等于992px）

大屏幕（大桌面显示器，大于等于1200px）

注意写断点的顺序

从小到大

@media (min-width:768px){

/*窗口大小 >=768像素*/

}

@media (min-width:992px){

/*窗口大小 >=992像素*/

}

@media (min-width:1200px){

/*窗口大小 >=1200像素*/

}

从大到小

@media (max-width:1200px){

/*窗口大小 <=1200像素*/

}

@media (max-width:992px){

/*窗口大小 <=992像素*/

}

@media (max-width:768px){

/*窗口大小 <=768像素*/

}

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

页面基础标签构成：

<header>我是头部</header>
<section class="container">
	<div class="left">
		我是左侧
	</div>
	<div class="right">
		我是右侧
	</div>
</section>
<footer>
	我是底部
</footer>