响应式布局---1. 响应式开发

1.1 响应式开发原理

就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备的目的。在响应式开发中将设备划分成以下4个挡位。

1.2 响应式布局容器

响应式需要一个父级作为布局容器来配合子元素实现变化效果。
原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式的变化。 布局容器的宽度应该都是固定的。

平时响应式尺寸的划分

• 超小屏幕（手机，<768px）:设置宽度为100%
• 小屏幕（平板，>=768px）：设置宽度为750px
• 中等屏幕（桌面显示器，>=992px）：设置宽度为970px
• 大屏幕（大桌面显示器，>=1200px）：设置宽度为1170px
  布局容器宽度比屏幕宽度小一点，这样两侧留有空白，效果会好看点。对于特殊的页面(通栏)可以设置版心，这样也可以保证相对于屏幕而言，内容的两侧留有空隙。
  举例：

响应式导航案例

思路：

• 当屏幕宽度大于等于768px，我们给布局容器container宽度设置为750px
• container里面包含8个小li盒子，每个盒子的宽度定为93.75px(750/8),高度为30px,浮动一行显示。
• 当屏幕缩放，宽度小于768px的时候，container盒子的宽度设置为100%宽度
• 此时里面的8个小li,宽度修改为33.33%，这样一行只能显示3个小li，剩余的下行显示。
  
  

    

        

            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏