响应式布局

1.媒体查询

CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组成，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断结果为true的时候，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为false，样式表同样会被下载，但是不会应用。用媒体查询来实现响应式布局。
@media screen and (max-width: 768px)    超小屏
@media screen and (min-width:768px) and (max-width: 992px)   小屏
@media screen and (min-width:992px) and (max-width: 1200px)  中屏
@media screen and (min-width: 1200px)    大屏

比如：

    <style>
        .box{
            height: 100px;
        }
        @media screen and (max-width:768px) {
            .box{
                background-color: lightskyblue;
            }
        }
        @media screen and (min-width:768px) and (max-width:992px) {
            .box{
                background-color: pink;
            }
        }
        @media screen and (min-width:992px) and (max-width:1200px) {
            .box{
                background-color: plum;
            }                
        }
        @media screen and (min-width:1200px) {
            .box{
                background-color: mediumpurple;
            }
        }
    </style>
​

通过改变浏览器大小，这个盒子的背景颜色就会改变。

2.通过使用相对单位来设置大小

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

3.flex弹性布局