bootstrap-移动WEB开发之响应式布局

响应式布局学习目标

一个页面兼容了pc端，pad端，和手机端

1. 响应式布局是不需要单独写移动端页面的
2. 响应不同的设备发生不同的变化时，包括三端之间的变换。

响应式开发

响应式开发原理

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

通过媒体查询实现档位的变化

响应式布局容器

响应式需要一个父级（.container）作为布局容器，来配合子级元素来实现变化效果。（pc端三列显示，一旦检测到变为小于992px，则变为以行来显示）原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

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

• 超小屏幕（手机，小于768px）:设置宽度为100%
• 小屏幕（平板，大于等于768px）:设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）:宽度设置为970px
• 大屏幕（大桌面显示器，大于等于1200px）:宽度设置为1170px

两者数值有差异，是因为要在边缘留白，这样显得好看一点

CSS中：
    .container {
        height: 150px;
        background-color: pink;
        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;
        }
    }
</style>


<!-- 响应式开发里面，首先需要一个布局容器 -->
<div class="container"></div>

随着鼠标拖动页面宽度，版心大小会相应变化，同时留白也会变化

案例：响应式导航

注意：
1.想要加margin: 0 auto;必须要给宽度或者高度其中一个
2.想要显示background-color必须至少有一个高度
3.list-style: none;尽量写在ul中

    * {
        margin: 0;
        padding: 0;
    }


    .container {
        width: 750px;
        margin: 0 auto;
    }


    ul {
        list-style: none;
    }


    li {
        float: left;
        width: 93.75px;
        height: 30px;
        background-color: green;
        text-align: center;
        font-size: 17px;
        line-height: 30px;
        color: #fff;
    }


    @media screen and (max-width: 767px) {
        .container {
            width: 100%;