响应式布局---1. 响应式开发
1.1 响应式开发原理
就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备的目的。在响应式开发中将设备划分成以下4个挡位。
1.2 响应式布局容器
响应式需要一个父级作为布局容器来配合子元素实现变化效果。
原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式的变化。 布局容器的宽度应该都是固定的。
平时响应式尺寸的划分
- 超小屏幕（手机，<768px）:设置宽度为100%
- 小屏幕（平板，>=768px）：设置宽度为750px
- 中等屏幕（桌面显示器，>=992px）：设置宽度为970px
- 大屏幕（大桌面显示器，>=1200px）：设置宽度为1170px
布局容器宽度比屏幕宽度小一点，这样两侧留有空白，效果会好看点。对于特殊的页面(通栏)可以设置版心，这样也可以保证相对于屏幕而言，内容的两侧留有空隙。
举例：
<body>
<!-- 响应式开发里，首先需要一个布局容器 -->
<div class="container">
</div>
</body>
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1.超小屏幕（手机，<768px）,布局容器设置宽度为100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕（平板，>=768px）,设置宽度为750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3.中等屏幕（桌面显示器，>=992px）,设置宽度为970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4.大屏幕（大桌面显示器，>=1200px）,设置宽度为1170px */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
响应式导航案例
思路：
- 当屏幕宽度大于等于768px，我们给布局容器container宽度设置为750px
- container里面包含8个小li盒子，每个盒子的宽度定为93.75px(750/8),高度为30px,浮动一行显示。
- 当屏幕缩放，宽度小于768px的时候，container盒子的宽度设置为100%宽度
- 此时里面的8个小li,宽度修改为33.33%，这样一行只能显示3个小li，剩余的下行显示。
<body>
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: green;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
</style>
