响应式布局

1.布局单位

px         像素；固定单位；

em        相对单位；相对于该元素的fontsize大小；（fontsize最小可以设置为0px，这样会隐藏文字，当设置在1px-12px之间时，设置的和显示的并不一样，页面文字显示的fontsize最小为12px；

rem        相对单位；相对于html的fontsize大小：

vw           viewWidth，相对单位；将页面宽度等分为100份，1vw相当于1%，设置元素占满页面宽度是100vw；

vh            viewHeight  相对单位；同理；将页面高度分为100份的vh；

2.响应式布局

        当页面宽度或者高度改变时，页面的元素等比例同时缩小，不改变页面的整体布局；当页面宽度太小的时候，使用媒体查询改变元素的css样式；

3.响应式布局的实现方法

        使用rem和vw单位，设置html的fontsize的大小，之后元素的单位都设置为rem单位的数值；

        一般来说，开发中主要还是因为页面宽度的改变会使页面元素显示不全，高度的话（有滑轮），所以我们要将设置图中的1px换算为vw；

                设计图的总宽度 / 100vw = 设计图的1px / 1px对应多少vw 

  =>         多少vw = 100 vw / 设计图的总宽度 * 1px；

                将html的fontsize设置为上面公式求出的值，后续元素使用rem进行设计即可；

由上面的公式，当我们拿到一个750px宽的图纸，设计图中的div宽高为100px，距离左边是100px；最后实现的页面是响应式布局，在1500px宽的屏幕上，盒子应该宽高应该是200px，距离左边是200px；

*{
    margin:0;
    padding:0;
}
html{
    font-size: 0.1333333333vw;
}
div{
    width: 100rem;
    height: 100rem;
    margin-left: 100rem;
    background-color: red;
}

上述代码即可实现了响应式布局，但是通常在开发中，我们并不用1px作为基本单位，而是使用100px作为基本单位；

那么改一下，则变成了：

*{
    margin:0;
    padding:0;
}
html{
    font-size: 13.333333333vw;
}
div{
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
    background-color: red;
}