响应式布局容器 - 前端学习教程_ 前端_前端开发

响应式网站中使用布局容器来实现控制页面中每个元素的大小和布局变化，需要一个父级元素作为布局容器，来配合子级元素实现变化效果。其原理是，在不同屏幕下，通过媒体查询来改变这个布局容器的大小，然后改变里面的子元素的排列方式和大小，从而实现不同屏幕下，页面布局和样式发生变化。

在移动Web开发中，常见的响应式布局容器尺寸划分如表1所示。

表1 响应式布局容器尺寸划分

设备划分	尺寸区间	宽度设置
超小设备（手机）	< 576px	100%
平板	≥576px	540px
桌面显示器	≥768px	720px
大桌面显示器	≥992px	960px
超大桌面显示器	≥1200px	1140px

接下来通过案例演示如何使用媒体查询，来根据常见屏幕尺寸进行宽度设置，实现响应式页面布局。具体如例4-1所示。

【例4-1】

（1）创建C:\web\chapter04\demo03.html文件，具体代码如下。

 1 <head>
 2  <meta name="viewport" content="width=device-width">
 3  <style>
 4   /* 1. 超小设备（小于576px）布局容器的宽度为100% */
 5   @media screen and (max-width: 575px) {
 6    .container {
 7     width: 100%;
 8    }
 9   }
 10   /* 2. 平板设备（大于等于576px）布局容器的宽度为540px */
 11   @media screen and (min-width: 576px) {
 12    .container {
 13     width:540px;
 14    }
 15   }
 16   /* 3. 桌面显示器（大于等于768px）布局容器宽度为720px */
 17   @media screen and (min-width: 768px) {
 18    .container {
 19     width: 720px;
 20    }
 21   }
 22   /* 4. 大桌面显示器（大于等于992px）布局容器宽度为960px */  
 23   @media screen and (min-width: 992px) {
 24    .container {
 25     width: 960px;
 26    }
 27   }
 28   /* 5. 超大桌面显示器（大于等于1200）布局容器宽度为1140 */ 
 29   @media screen and (min-width: 1200px) {
 30    .container {
 31     width: 1140px;
 32    }
 33   }
 34   .container {
 35    height: 50px;
 36    background: #ddd;
 37    margin: 0 auto;
 38   }
 39  </style>
 40 </head>
 41 <body>
 42  <div class="container">布局容器</div>
 43 </body>
 44 </html>

上述代码中，设置了一个类名为container 的div布局容器，并使用媒体查询的方式在不同屏幕尺寸下对布局容器的宽度进行设置。

（2）通过浏览器测试，观察在不同窗口宽度下布局容器是否会相应发生变化。页面效果如图1所示。

图1 布局容器效果