关于前端:不要再用js设置rem了现代css自适应方案来了

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

尤其是智能手机呈现之后，咱们没有方法在去固定咱们的设施宽高，须要思考 响应式 设计，依据浏览器窗口大小有不同的布局形式

单位分为相对单位和绝对单位，其中相对单位有 px、mm、cm、in、pt、pc 这些都能够互相转换

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

当然咱们还须要晓得的是，css 尽管是一个相对单位，然而它并不等于显示器的像素，须要通过 dpr 进行换算

最常见的绝对单位是 em 和 rem

1em 示意的是以后元素的字号，能够看到 1em 是 16px，因为以后元素的 font-size 是 16px，浏览器会依据绝对单位 em 计算出相对单位 px，所以当你扭转了这个元素的 font-size，其对应的 padding 也会随之变动，设置 padding、height、width、border-radius 这些属性的时候，应用 em 很不便，会动静依据 font-size 变动

那既然元素的 em 是依据以后元素的 font-size 来的，那给以后元素设置 font-size 应用 em，那对应的值是什么呢？

能够看到，目前 font-size 变成了 32px，为了失去 font-size 的值，须要参考继承的字号。这个时候如果设置了 padding 的值也是 2em，尽管 font-size 和 padding 都是 2em，然而它们的值是不一样的，padding 的大小为 64px，font-size 先取到，而后依据 font-size 计算出 padding

这里减少了计算的复杂性，所以个别 font-size 咱们给固定的值就好，否则就会多层嵌套导致最终的后果不合乎预期，所以如果不小心应用 em，会让 em 很难依照我咱们料想的来

所以咱们有更好用的 rem

在 html 文档中，根节点是所有其它元素的先人，:root 示意根节点的伪类选择器，能够用来选中 html，html 类型选择器和 :root 伪类选择器优先级是有区别的

rem 是 root em 的缩写，rem 不是绝对于以后元素，而是绝对于根元素，所以，不论什么地位，应用 rem 单位都是绝对于根元素的 font-size

既然 rem 这么好用，并且不存在 em 那么简单的计算逻辑，是不是在我的项目中咱们都用 rem 就好了呢？当然理论在我的项目中想必大家都是 rem 梭哈，这里我总结了一些实用场景

rem 个别状况下就是用来设置 font-size，px 设置边框，em 设置绝大部分属性，比方 padding margin border-radio 等等，这样对立的字号规范，让页面不论是缩放还是适配都熟能生巧，所以当你拿捏不准应用什么形式来设置一些元素的时候，就依照上述的来，个别是没有什么问题的

自从有了 rem 这个便捷的绝对单位，咱们就有了一些奇怪的操作，比方用 js 设置根元素大小这个操作，就是将网页的根元素字号依据屏幕的大小动静设置为一个固定值，而后在页面中依据 ui 给出的图，换算成 rem 值，进行各种适配

甚至衍生出了一些 px 转换成 rem 的插件，当然这些做的确有些不便，然而不可否认的是它也有肯定的问题

当屏幕小的时候，font-size 的大小会变成 10px，然而咱们好多零碎最小字也就是 12px，10px 展现有问题，导致咱们须要给所有的元素上设置至多为 1.2rem 能力保障显示失常
当屏幕过大的时候，比方挪动端转到 pc 端，页面的根元素 font-size 又会变的很大，感官上基本不能用

用以上所学，咱们创立一个题目带段落的阐明

<style>
  :root{font-size: 0.875em;}
  .container{
    padding: 1em;
    border-radius: .5em;
    border: 1px solid #000;
  }
  h1{
    margin-top: 0;
    font-size: 1rem;
    font-weight: bold;
  }
  p{font-size: .8rem;}
</style>

<body>
  <div class="container">
    <h1>FE 情报局 </h1>
    <p> 哈喽大家好，这里是 FE 情报局，我是局长，明天这篇文章深刻了解的话，会学到如何应用古代 css 的布局计划，为咱们提供一个响应式的布局，可能让咱们不论是在页面缩放，还是不同的屏幕之间，都有良好的用户体验，当然根元素默认字号 14px</p>
  </div>
</body>

这的确是会减少咱们一些工作量，因为你须要思考什么时候应用 em，什么时候应用 rem 以及 px 之间互相切换，然而益处也是很显著的

如果你想要将以后的内容做一个响应式

只须要这样

@media (min-width: 800px){
  :root{font-size: 1em}
}

@media (min-width: 1200px){
  :root{font-size: 1.2em}
}

随着屏幕的变动，字号逐步减少，即使是对一个组件进行不同的自适应，你只须要更改对应组件的 font-size 即可

当然 css 中绝对单位还有常见的内容

vh: 视口高度的 1 /100
vw: 视口宽度的 1 /100
vmin: 视口宽度或者高度中较小的一方 1 /100
vmax: 视口宽度或者高度中较大的一方 1 /100

50vh 也就是视口高度的一半

方才咱们应用媒体查问定义了根元素 font-size，当页面宽度变动到指定像素的时候会忽然变成咱们设置的内容，当初既然有了 vw，是不是能够应用 vw 进行设置，视口扭转时，元素天然过渡

实际一下

:root{font-size: 2vw}

这样在小屏幕上因为有最小字号限度，所以可能展现最小 12px 的字，然而屏幕一旦变大，导致字号也跟着变大，变小尽管字能看，然而边距会随之减小到很小的水平

有没有什么方法呢？

calc 大家根本都用过，它能够对两个以及以上的值进行根本运算，比方 calc(1em + 10px)，反对加减乘除

对于根节点，为了保障最小值，咱们能够这样

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

这样能保障最小值，也不至于屏幕大了字号过大，做了一个较好的适配

这就是应用古代 css 的是配置形式

更多的应用绝对单位来设置一些属性
rem 设置字号，em 设置额定内容，px 设置边框
应用 calc+vw 也能做好个别自适应

关于前端:不要再用js设置rem了现代css自适应方案来了

css 中的单位

相对单位

em

rem

理论应用的选择性

应用 js 设置根元素 rem

理论利用

视口绝对单位

calc

总结