CSS中的rem

Veröffentlicht am | Bearbeitet am | in

近些年来随着微信小程序的蓬勃发展，原本适用于PC端的字体型号px好像不再那么的万金油了，尤其是面对不同的手机屏幕，px的适配性显得过于呆板。之前的一些大厂选用了通用型号的屏幕适配，多余的部分则用留白来填补。这样虽然让Plus型号得以施展，但是一段留白总归看的诸位土豪心中不爽。随着CSS的发展，rem横空出世解决了这一难题

为了大家的时间，我们采用我初中答政治题的方式，分“是什么”，“为什么”，“怎样做”三个方面给大家讲一下rem的详情，希望最大程度的节省大家的时间

是什么？

rem全称font size of the root element，指相对于根元素字体大小的单位。
之前他还有个兄弟：em

  • em：相对父元素字体大小的单位
  • rem：相对于根元素字体大小的单位

为什么？

理由的话我们之前也讲过了，rem是针对于web app推出的新属性，同样的适用于web page。如果按照之前的固定宽度做法太死板，如果设置响应式布局又难以维护还麻烦，所以干脆咱们用rem，有个统一参照还好收拾，利索！

怎样做

首先是设置根元素，也就是html的字体大小
比如我们设置为10px

1
2
3
html{
	font-size:10px;
}

然后就可以灵活的控制啦

1
2
3
4
5
6
7
8
9
10
11
12
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

最终.btn的宽度为60px

敲黑板！！！！！说结论啦！！！！！
最终字体的px = 倍数 * 根节点px
也就是说，上边的60px宽度是6*10px计算得来的！、

不同分辨率下的font-size又是怎么搞？
1
2
3
4
html{
	//100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。
    font-size: calc(100vw/7.5);
}

全局px替换为rem
替换设计稿中的px为rem，即font-size: 12px，需要写成font-size: .12rem。注意rem=px/100，其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位，遂当设备宽度改变时，采用rem布局的大小均会跟随相同比例变化，从而实现整体缩放。

低版本浏览器的话还需要手动适配哦

1
document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'