rem,px,em vw实例理解

使用rem,px,em,vw写相同大小4个的div

rem,px,em,vw，4种单位，用来描述元素大小的。

px：绝对单位

em：相对单位 相对父级

rem：相对单位 相对根html

vw：视窗宽度

具体区别看下方实例：

4个div,px表示固定宽度设置了320px,任意默认浏览器字体是16px，em * 字体 = 预期大小。所以如果想要设置一样大小的div,

em * 16 =320px,em就为20，rem同理，rem不会被父级的字体所影响，大小是以html跟节点的字体默认计算的。1vw表示

是视图窗口的1%

红色：px,绿色em,蓝色 rem,黄色 vw

rem, em的区别

当我对rem,em套上父级div去影响子元素的时候，只有em（绿色）会被影响,即以父级的大小计算 8*20 = 160px，而蓝色需要添加对根节点的字体大小修改html下的font-size才能影响

如下：

3.影响VW的原因是视口宽度，当我拖动浏览器宽度得到放大。黄色div是50vw即视口的50%,拖到两倍大小时候即可以得到和上面显示的相同大小

移动端对比

移动端同理，不过需要添加一句代码，修改视口宽度，不然浏览器默认视口会是980px,调到谷歌浏览器移动端模式之后

就会感觉图像变小了。

<meta name="viewport" content="width=device-width,user-scalable=no" />

加了代码以后

不加代码