背景

我忽然发现em这个东西在我同事眼里居然是个宝，用它可以实现很多东西比如CSS 实现多行文本“展开收起”。我第一次接触并在项目中使用是移动端网页在微信内打开，字体放大布局紊乱。后来我发现居然还可以这样用

移动端布局我用过的哪些单位

最开始我使用px，然后安装一个插件，px转换为rem或者vw，页面中就是直接写px，对比设计稿像素的时候比较方便。但是她的缺点事所有的单位都转为vw，其实并不建议的。 具体原因我忘记了，到底是对于字体来说，最好是不要转换，还是别的问题

所以我的移动端页面我使用rem最多,自己手动计算。相对于上面而言，就是不需要引入第三方插件，不受任何约束。比如一个宽100px的我自己写就是width:calc(100rem / 16),16 是根元素的大小

后来我想小伙伴的项目里面发现，其实这个还可以用变量来实现的，variables.css 里面写:root{ –rem: calc(1 / 16 *rem);} 项目中使用width:calc(20 * var(–rem))。最后的结果是一样的，可以自己试试，相对比好像上面的要简单一点点，但是如果在less里面，下面这种写法就会简单一点，因为less可以支持变量，而原生的css就要有借助var了

微信字体放大布局紊乱问题

微信字体放大路径：微信 => 导航栏三个点 => 调整字体 => 放到最大

正常字体正常情况下显示的布局（即设计稿

用户设置微信字体变大之后（布局乱完了

究其原因是因为，字体放大了，而背景图片没有变化，原来的布局没有自适应，所以出现了这样的情况。随机的打开了布局复杂一点点的h5活动页面，我发现大部分页面都有这个问题，这个对于老年用户不太友好。因为老人家字太小了看不清，就喜欢把字放到方便阅读。当用户调整字体之后，能够保持大致布局不变，才是用户想要的。

产品提了一个新需求，字体放大后页面布局基本保持不变

用户把字体调到最大之后

满足产品需求了，布局没有乱到不能看，大概的布局可以根据字体自适应，问题解决了。开心

实现原理：

1. 页面用 flex 布局

2. 宽/高度相关单位用em，字体单位用rem，比如字体14px，宽度100px=> font-size:calc(14rem / 16);width:calc(100rem / 14)

3. 真机测试，基本没有问题

字体变大布局跟着变，只能用em单位解决了

多行显示省略号或者一行中间显示

CSS 实现多行文本“展开收起” 我同事写的这个，其实实现原理就是em单位

line-height:1.5;max-height:1.5*n;overflow: hidden;，最大高度是行高的多少倍，就会出现超出隐藏的效果。具体的可以去看看文章写的很仔细了

后来我同事又写了一篇文章，CSS 文本超出提示效果文章写的很细很不错，推荐读一读。

我参照他的思路大概就是实现了如果一行内容很长省略号出现在中间，首尾显示完全

中间省略号

可以自行看代码，读懂其中的奥秘。你就会发现 css 真的很神奇，很有意思

总结

css 真是个神奇的东西，使用恰当个个都是宝，否则就是平淡无奇小属性。