响应式中使用布局容器来实现控制页面中每个元素的小和布局变化，需要一个父级元素作为布局容器，来配合子级元素实现变化。其原理，在不同屏幕下，通过媒体查询来改变这个布局容器的小，然后改变里面的子元素的排列和小，从而实现不同屏幕下，页面布局和样式发生变化。
在Web发中，常见的响应式布局容器尺寸划分如表1所示。
表1响应式布局容器尺寸划分
设备划分 | 尺寸区间 | 宽度设置 |
超小设备（） | <576px | |
平板 | ≥576px | 540px |
桌面显示器 | ≥768px | 720px |
桌面显示器 | ≥992px | 960px |
超桌面显示器 | ≥1200px | 1140px |
| | |
接下来通过案例演示如何使用媒体查询，来根据常见屏幕尺寸进行宽度设置，实现响应式页面布局。具体如例4-1所示。
【例4-1】
（1）创建C:\web\chapter04\demo03.html文件，具体代码如下。
<head>
<metaname="viewport"content="width=device-width">
<style>
/*1.超小设备（小于576px）布局容器的宽度为*/
@mediascreenand(max-width:575px){
.container{
width:;
}
}
/*2.平板设备（于等于576px）布局容器的宽度为540px*/
@mediascreenand(min-width:576px){
.container{
width:540px;
}
}
/*3.桌面显示器（于等于768px）布局容器宽度为720px*/
@mediascreenand(min-width:768px){
.container{
width:720px;
}
}
/*4.桌面显示器（于等于992px）布局容器宽度为960px*/
@mediascreenand(min-width:992px){
.container{
width:960px;
}
}
/*5.超桌面显示器（于等于1200）布局容器宽度为1140*/
@mediascreenand(min-width:1200px){
.container{
width:1140px;
}
}
.container{
height:50px;
background:#d;
margin:0auto;
}
</style>
</head>
<body>
<divclass="container">布局容器</div>
</body>
</html>
上述代码中，设置了一个类名为container的div布局容器，并使用媒体查询的在不同屏幕尺寸下对布局容器的宽度进行设置。
（2）通过浏览器测试，观察在不同窗口宽度下布局容器否会相应发生变化。页面如图1所示。
图1布局容器
