响应式中使用布局容器来实现控制页面中每个元素的小和布局变化，需要一个父级元素作为布局容器，来配合子级元素实现变化。其原理，在不同屏幕下，通过媒体查询来改变这个布局容器的小，然后改变里面的子元素的排列和小，从而实现不同屏幕下，页面布局和样式发生变化。
在Web发中，常见的响应式布局容器尺寸划分如表1所示。
表1响应式布局容器尺寸划分
container什么意思
设备划分
尺寸区间
宽度设置
超小设备（）
<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布局容器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。