rem em vh和vw移动端M站初探

A

首先看了好几篇帖子 这个勤劳爱思考的老哥早在三四年前已经写的特别好了，借鉴了许多不同的代码也有自己的观点（主要在于评论里）https://segmentfault.com/a/1190000003690140.

B

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em: em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，但其复杂的计算让人诟病，甚至有人做了个px和em的计算器，不同节点像素值对应的em值，

em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算， rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
rem取值分为两种情况，设置在根元素时和非根元素时，举个例子:

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html{font-size:2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p{font-size:2rem}

C

Rem布局原理

rem布局的本质是等比缩放，一般是基于宽度，我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比

p{width:50x}/* 屏幕宽度的50% */

页面元素随着屏幕宽度等比变化，我们需要上面的x单位，css中并没有这样的单位，有rem，通过rem，可以实现x
通过上面对rem的介绍，可以发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html{font-size:2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p{font-size:2rem}

如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了

html{fons-size:width/100}
p{width:50rem}
/* 50rem = 50x = 屏幕宽度的50% */

如何让html字体大小一直等于屏幕宽度的百分之一呢？ 可以通过js来设置，一般需要在页面dom ready、resize和屏幕旋转中设置

document.documentElement.style.fontSize=document.documentElement.clientWidth/100+'px';

D

比Rem更好的方案 Vh和Vw

x等于屏幕宽度的百分之一，css3带来了rem的同时，也带来了vw和vh
vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN
单位x吗，根据定义可以发现1vw=1x，有了vw我们完全可以绕过rem这个中介了，下面两种方案是等价的，可以看到vw比rem更简单，毕竟rem是为了实现vw么

/* rem方案 */
html{fons-size:width/100}
p{width:15.625rem}
/* vw方案 */
p{width:15.625vw}
vw还可以和rem方案结合，这样计算html字体大小就不需要用js了
html{fons-size:1vw}
/* 1vw = width / 100 */
p{width:15.625rem}

另外，在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题

em是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询

E

经过大型项目实践，下面这段CSS是最好的基于rem和vm和calc实践代码：