rem 详细介绍及使用(一)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了rem 详细介绍及使用(一)相关的知识,希望对你有一定的参考价值。

参考技术A rem(root em) 是一个相对单位,类似em单位。

em 是相对于父元素字体大小的倍数,例如: 设置某元素的父元素font-size为 10PX 如果设置该元素的宽度为 10em 那么 就相当于把宽度设置为100px 。
例如:

通过以上案例,我们可以知道em的作用,那么rem 代表的是 root em ,也就是说rem 是相对于根元素的字体大小。而根元素就是html
例如:

得到的结果为:

通过这个技术,我们就可以让每一个元素都使用rem 单位来定义大小,这样在适配不同移动设备的时候,我们就只要修改html 的font-size 就可以做到让所有的元素都能够进行相应的适配。(比如: 设备屏幕大的时候,就设置html 的font-size 大一些,那么页面中所有的元素的宽、高、字体大小、都能够相应地变大)。

因为em 是相对父元素的,所以如果使用em 进行适配的话,那么就要对每一个父元素都要进行修改,这样做效率会非常低而且也不利于维护。

这个时候我们就需要用到CSS3中的 @media 功能

读者可查看我的另一篇文章。里面有详细介绍了@media功能的使用
https://www.jianshu.com/p/2b564dbfeee1

页面自适应与rem

在写前端页面的时候经常会用到rem,也在网上看了别人对rem的介绍,详细的情况就不在此描述,只说一下我对rem的看法和用法。

在我看来,rem 是一种相对的尺度,相对于根元素设置的font-size,比如:

html 
    font-size: 16px;

那么,在别的地方使用rem的时候 1rem 就会等于 16px。
这算是对rem最基础的应用,但是这种使用方式和直接使用px没有任何区别,只是单位不一样,需要进行换算。
既然rem 是一种相对尺度,最常用于页面自适应,我们就不能简单粗暴的直接对根元素设置字号来决定1rem的大小。
众周所知,android手机屏幕大小不一,各种尺寸的都有,这样的情况给我们的前端开发带来了很大的麻烦,我们不可能针对每一种手机尺寸去写一套代码来进行适应。设计师也不可能针对每一种手机尺寸做一套设计标注。
假设设计师做的图以750px为宽度。我们怎么能在一套设计图和一套代码里去适应所有的手机屏幕呢?这时候rem就非常有用了。
不知道别人公司是怎么用的,在我们公司针对rem做了一个转换公式。

根字号 = x * ( pageWith / 750 );

这里有几个值需要解释一下:

  • x 这是一个自由的值,是你希望1rem能代表多少设计图上的px,可以随意设置
  • pageWith 页面实际尺寸 px
  • 750 这个是设计图的宽度
  • 根字号 就是这个公式的计算结果,也是你将要使用的1rem所代表的px值。

这里还有一个地方要解释一下,什么是设计图上的px? 比如设计图宽度为750px,你希望1rem = 100px 那整个设计图的宽度就可以写做7.5rem,但这个100px只是针对于设计图,因为实际上手机的尺寸是不确定的。

啊~~~ 越说越乱了,还是先解释公式吧:

公式的意思是把真实的屏幕分成设计图宽度的份数,乘以你希望1rem能代表多少设计图上的Px,最终得到一个值,把这个值当做根元素的字号,你的页面中就可以完全使用rem,完全按照设计图上的尺寸做界面,从而达到在不同手机屏幕下的自适应。

不知道有没有表达清楚我想表达的意思。还是上代码吧,

var remUnit = 0;
function setRemUnit () 
    var doc = document.documentElement;
    var width = doc.clientWidth;
    remUnit = 100 * (width / 750);
    doc.style.fontSize = remUnit + ‘px‘;


window.addEventListener(‘resize‘, setRemUnit);
setRemUnit();

这段代码意思是以设计图宽度750px为基准,以期望1rem=100px为前提,计算出一个值,设置到根元素上。
使用时可以这样用:
比如设计图上有一个div 宽度为300px,div内有一个头像 宽度120px,头像右侧是用户名,32号字,我们可以这样写:

.avatar-block 
    width: 3rem;
    ....
    .avatar 
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        ...
    
    .username 
        font-size: 0.32rem;
        ...
    

因为屏幕是不固定的,所以在不同屏幕下,通过计算得到的根元素字号也是跟着屏幕大小变化而变化的,所以才能做到一套设计图一套代码 就能适应所有屏幕。

以上是关于rem 详细介绍及使用(一)的主要内容,如果未能解决你的问题,请参考以下文章

InfoGAN详细介绍及特征解耦图像生成

datax详细介绍及使用

CDH6.3.2 详细介绍及使用

详细介绍Serializable的使用和注意事项

Sqoop-1.4.6安装部署及详细使用介绍

fstab文件详细介绍及修复fstab实战安例