作者：前端开发社区

正向链接：https://mp.weixin.qq.com/s/HVUyOi1BKNeNkwgBUtTf-g

一、前言

我们h5项目的终端适配采用淘宝的《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人聊到柔性布局的原理，发现虽然用了很久那个方案，但是对rem的理解很模糊，包括vw和vh。所以打算写个博客总结一下，以加深理解。

二、几个概念

这个我就不在这里说了。物理像素和设备像素是有比较的，你可以自己去查。要了解rem/em/vm/vh，首先要直观的了解它们是什么。明白了，以后就好办了。其实这些都是css单位，和px一样，只是都是相对单位。我平时用的百分比单位是：width :100%；是相对单位。

2.1、em

em作为font-size的单位时，表示父元素的字号，em作为其他属性的单位时，表示自己的字号——MDN。

比如父元素font-size :12 px；

如果其自身元素写成：font-sise :2 em；然后自己的元素用px表示，是24px(相对于父元素的字体大小)；

但是如果self-element设置为width:2rem，那么用px表示的self-element就是48px(相对于自己的字号)；

2.2、rem

rem作用于非根元素时，字体大小相对于根元素；当rem作用于根元素的字体大小时，相对于它的初始字体大小是——MDN。

比如根元素(html)设置为font-size=12px；非根元素设置width:2rem那么改成px就是24px；

如果根元素设置为font-size=1 rem；那么把根元素改成px是相对于初始字体大小的，一般是12px；

2.3、vm/vh

vw:视口宽度的1/100；Vh:视口高度的1/1003354 MDN。

在pc端，视口的宽度和高度就是浏览器的宽度和高度；

在移动端，这并不完全相同，但一般设置是：

meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1 '代码通过所显示网页的屏幕宽度来定义窗口宽度。网页的比例和最大比例设置为100%。

三、剖析rem布局原理

其实如果你很好的理解了上面的概念，rem的原理是很简单的。

假设我们把屏幕画图分成10个部分，每个部分的宽度用A表示，即a=屏幕宽度/10；所以：

Div{width:5a}但是css中没有单元A？那我该怎么办？对了，css没有相对单位rem吗？我们都可以用rem代替上面的a。比如：

HTML { font-size :12 px } div { width :2 rem }HTML { font-size :16 px } div { width :2 rem }那么问题来了？如何让html元素的字体大小始终等于屏幕的1/10？比如ipone6的宽度是375px，字号是：37.5px

Html { Fons-size : width/10 } div { width :5 rem }我们可以很容易地用js动态设置HTML的1/10的字体大小屏幕；我们可以在页面domready、调整大小和屏幕旋转中设置以下内容：

document . document element . style . font size=document . document element . client width/10 ' px '如何把设计稿的像素单位改成rem？可以用一个比例来计算：如果设计稿的宽度是750px，一个元素的量是75px，那么：

75px/750px=计算rem/10rem，所以计算rem=75px所以我们写width:1rem在风格上；实际宽度为75px；同样，如果设计草图的总宽度是640px，1rem=64px。

预处理功能可以简化：

$ UE-width :750；

@ function px 2 rem($ px){ @ return # { $ px/$ UE-width * 10 } rem；} div { width : px 2 rem(100)；}

四、rem万能吗？

rem是弹性布局，强调比例缩放和100%缩小。和响应式布局不同，响应式布局强调不同的屏幕要有不同的显示，比如媒体查询。

Rem不适合字体，字体大小和字体宽度没有线性关系，所以rem不能用于字体大小；因为设置了根元素的字体大小，所以它会影响

有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小？

我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小:

html{fons-size:width/10}body{font-size:16px}

那字体咋整？我们可以用媒体查询和em来实现：

@mediascreenand(min-width:320px){body{font-size:16px}}@mediascreenand(min-width:481px)and(max-width:640px){body{font-size:18px}}@mediascreenand(min-width:641px){body{font-size:20px}}div{font-size:1.2em}

在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

.selector{width:2rem;border:1pxsolid#ddd;}[data-dpr="1"].selector{font-size:14px;}[data-dpr="2"].selector{font-size:28px;}[data-dpr="3"].selector{font-size:42px;}

当然你也可以给非根元素设置合适的字体。

五、rem布局方案

从上可以看出最好的弹性布局方案就是rem+js的方案，《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。

动态改写标签给元素添加data-dpr属性，并且动态改写data-dpr的值。给元素添加font-size属性，并且动态改写font-size的值

六、em可以用来做弹性布局吗？

上面知道，一旦某个节点的字体大小发生变化，其他节点也随之变化，所以不合适，但是用来处理字体还是绝妙的。

七、vw/wh用来做弹性布局怎么样？

根据上面说，vw——视口宽度的1/100；vh——视口高度的1/100；感觉已经不用多说了。

html{font-size:width/10}p{width:1.5625rem}/*vw方案*/p{width:15.625vw}

如果rem方案中使用设置font-size=width/100就和vm意思一样，但是比如font-size:640px/100;浏览器不会识别6.4px这么小的字体的。

如果不考虑兼容性问题，可以大胆使用vw/vm做弹性的布局。

推荐CSS学习相关文章

「干货」纯CSS实现瀑布流（Masonry）

手把手教你CSSgrid布局「香」

手把手教你20个CSS快速提升技巧

细品100道CSS知识点（上）「干货满满」

细品100道CSS知识点（下）「干货满满」

手把手教你CSSFlex布局「真香」

细品用SVG实现一个优雅的提示框

手把手整理CSS3知识汇总【思维导图】

手把手教你55个提高CSS开发效率的必备片段

手把手教你常见的CSS布局方式【实践】

让CSSflex布局最后一行左对齐的N种方法

妙用CSS变量，让你的CSS变得更心动

纯CSS实现简单骨骼动画【实践】

CSS揭秘实用技巧总结

你未必知道的49个CSS知识点

深入浅出超好用的CSS阴影技巧

关于前端CSS写法104个知识点汇总（一）

关于前端CSS写法104个知识点汇总（二）

前端开发规范：命名规范、html规范、css规范、js规范

CSS变量实现暗黑模式，我的小铺页面已经支持

深入浅出CSS中彻底搞懂word-break、word-wrap、white-space

深入浅出详细讲解CSS渲染原理以及优化策略

手把手教你深入CSS实现一个粒子动效的按钮

手把手教你css中多种边框的实现小窍门【实践】

手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】

作者：前端开发社区

转发链接：https://mp.weixin.qq.com/s/HVUyOi1BKNeNkwgBUtTf-g