一、响应式开发

1.响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

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

2.响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同的页面布局和样式变化。

平时我们的响应式尺寸划分

超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px
设置一般比屏幕宽度小的原因是为了居中对齐。

 .container {
            height: 150px;
            background-color: skyblue;
            margin: 0 auto;
        }
        /* 1.超小屏幕下 小于768  布局容器的宽度为100% */
        
        @media screen and(max-width:767px) {
            .container {
                width: 100%;
            }
        }
        /* 2.小屏幕下， 大于等于768 布局容器改为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;
            }
        }

但是我们也可以根据实际情况自己定义划分。

3.案例：响应式导航

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

<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>

<body>
    <div class="container">
        <ul>
            <li>导航栏1</li>
            <li>导航栏2</li>
            <li>导航栏3</li>
            <li>导航栏4</li>
            <li>导航栏5</li>
            <li>导航栏6</li>
            <li>导航栏7</li>
            <li>导航栏8</li>
        </ul>
    </div>
</body>