乐趣区

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

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

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

css 中的单位

相对单位

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

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

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

最常见的绝对单位是 emrem

em

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

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 等等,这样对立的字号规范,让页面不论是缩放还是适配都熟能生巧,所以当你拿捏不准应用什么形式来设置一些元素的时候,就依照上述的来,个别是没有什么问题的

应用 js 设置根元素 rem

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

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

  1. 当屏幕小的时候,font-size 的大小会变成 10px,然而咱们好多零碎最小字也就是 12px,10px 展现有问题,导致咱们须要给所有的元素上设置 至多为 1.2rem 能力保障显示失常
  2. 当屏幕过大的时候,比方挪动端转到 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 大家根本都用过,它能够对两个以及以上的值进行根本运算,比方 calc(1em + 10px),反对加减乘除

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

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

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

总结

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

  1. 更多的应用绝对单位来设置一些属性
  2. rem 设置字号,em 设置额定内容,px 设置边框
  3. 应用 calc+vw 也能做好个别自适应
退出移动版