在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化

尤其是智能手机出现之后，我们没有办法在去固定我们的设备宽高，需要考虑 响应式 设计，根据浏览器窗口大小有不同的布局方式。

rem

它是相对于根元素html的字体大小。

em

它是相对于自身字体大小，如果没有就使用父元素字体大小。

calc

它可以对两个以及以上的值进行基本运算，比如calc(1em + 10px)，支持加减乘除。

对于根节点，为了保证最小值，我们可以这样：

:root{ 
    font-size: calc(0.5em + 1vw) 
}

实际应用

文字大小推荐使用calc+rem，这样更加灵活，也能保证最小值，不至于屏幕大了字号过大，做了一个较好的适配。

总结

以下是使用现代 css 的是配置方式：

1. 更多的使用相对单位来设置一些属性。
2. rem 设置字号，em 设置额外内容，px 设置边框。
3. 使用 calc+vw 也能做好一般自适应。

既然有很多人讨论这个问题，我觉得我有必要补充一下：

第一点：对于 rem 来说，全局使用当前看是没有什么问题，但是大家可以思考一下，使用了 rem，本质就是你的网站在不同的屏幕上缩放，在移动端还好，如果一旦放到 pc 端，那效果大家想必都很清楚，那么大的屏幕看到的内容有可能还没有移动端的多，这纯粹是一种偷懒的方式，只是把移动端放大而已。

第二点：通篇 rem，根节点的 font-size 是变化的，之后页面中所有字体大小的部分都不能继承默认值，需要手动全部改成想要的字体大小。

第三点：三方组件，比如富文本编辑器，写出来的内容是px的，和 rem 的内容格格不入，除非你用一些特殊的方式将其隔离（比如iframe）。

第四点：文章的重点还是希望能够配合 em、vw、px、calc 等方式去处理一些逻辑，元素的字体大小根据 rem 设置，这样动态改变 rem 的大小，就能够让 em 动态适应。

第五点：现代布局通过 flex + vw 等方式已经足够解决大部分问题了，虽然有一些计算成分，不同的设备下，我想看到的是更多的内容而不是更大的字。

说到底还是需要掌握 flex、grid 等现代布局的方式。

转载自稀土掘金，作者：FE情报局，链接：https://juejin.cn/post/7189222771140853797