移动端布局之vw，em,rem的用法总结以及响应式布局原理

移动端布局之vw，em,rem的用法总结

**
这是一个！+tab键生成的简单的html结构，而移动端最重要的就是这句话
***
一键生成页面，基本上都会有这段声明，快捷键生成meta:vp_tab键也能生成，这段标签上面的viewport是屏幕窗口的意思，width=device-width中的width指的是虚拟窗口的宽度，device-width指的是实际窗口的宽度。
1.什么是em?
em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置即参照父容器的字号大小或浏览器默认字号大小。


假设给这个元素设置了xem，那么它的实际大小就是父元素font-size大小的x倍。如果父元素没有设置font-size属性，那么它会跟随浏览器默认font-size大小的x倍。


它会选择离它最近的父元素的fon-size大小，并扩大x倍。如果自身已经设置了大小，会优先根据自身大小去扩大。
2.什么是rem?
rem是css3的新标准也是一种相对长度单位，其相对于HTML根标签的字号大小,如果根元素没有设置字体大小，就会跟随浏览器默认字体大小。

为了便于计算，一般都是给html设置100px，那么你下面测量到的单位就应该除100，如果你的dpr值是2或者3，也应该相应的除2或者3，
什么是dpr呢？dpr，也被称为device pixel ratio，即物理像素与逻辑像素的比，就是物理像素、实际像素

3.什么是vw?
vw：相对于视图窗口的宽度，是一种视图单位
1vw等于视图窗口宽度的1%；
4.vw和rem的结合使用：

根据1vw等于视图窗口宽度的1%，那么，现在假设有一张750的设计稿，这是逻辑像素，它的物理像素是375px，1vw=375的1%，1vw=3.75px,之前我们为了计算方便，给根元素设置font-size：100px；把100px换算成vw也就是26.67vw（四舍五入的结果），就可以给html设置26.67vw，就相当于给html根元素设置100px，一样的效果。

响应式布局原理**

1. 响应式布局的核心就是媒体查询
2. 媒体查询也需要这段声明
   .
   外联式媒体查询，根据宽度判断是否引入相应的css!
   内嵌式媒体查询：
   
   
   min-width:最小宽度，意思是，800px以上，是绿色，max-width:最大宽度，意思是1000px以内，是红色
   语法：@media screen/print and 空格（一定要加）（max-width/min-width）