响应式布局

响应式布局

原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。（一套代码可以在PC和移动端使用）

设备划分	尺寸区间
超小屏幕（手机）	小于768px
小屏设备(平板）	>=768px~<992px
中等屏幕（桌面显示器）	>=992px~<1200px
宽屏设备（大桌面显示器）	>=1200px

响应式布局容器

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

常用响应式容器尺寸划分

设备划分	尺寸
超小屏幕（手机）小于768px	宽度100%
小屏设备(平板）>=768px~<992px	750px
中等屏幕（桌面显示器）>=992px~<1200px	970px
宽屏设备（大桌面显示器）>=1200px	1170px

也可以根据实际情况自己定义划分

案例

分析需求

1. 当我们屏幕大于等于800px，我们给nav宽度为800px，因为里面子盒子需要浮动，所有nav需要清除浮动。
2. nav里面包含8个小li盒子，每个盒子的宽度定位100px，高度为30px，浮动一行显示。
3. 当我们屏幕缩放，宽度小于800px的时候，nav盒子宽度修改为100%宽度。
4. nav里面的8个小li，宽度修改为33.33%，这样一行就只能显示3个li，剩余下一行显示。

    .nav {
        width: 800px;
        background-color: green;
        overflow: hidden;
        margin: 0 auto;
    }
    .nav li {
        float: left;
        width: 100px;
        height: 30px;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    }
    /* 在小屏幕中更改 */
    @media screen and(max-width:799px) {
        .nav {
            width: 100%;
        }
        .nav li {
            width: 33.33%;
        }
    }

.nav li {
width: 33.33%;
}
}