rem的使用 - 爱码网

通过SASS方式

要弄明白rem的使用，需将这几个概念结合起来自己推演一下：屏幕大小和设计稿的宽度，将设计稿分为多少份，根元素字体大小，否则看到别人的代码不知道为什么那样写，公式中数值的设定前提是对于某一尺寸的设计稿和基准字体大小而言的。

以下假定设计稿宽度为750px情形：

// 媒体查询

@media screen and (width:375px) {
    html {
        font-size: (375px/20);
    }
}

@media screen and (width:414px) {
    html {
        font-size: (414px/20);
    }
}

@media screen and (width:380px) {
    html {
        font-size: (380px/20);
    }
}

@media screen and (width:360px) {
    html {
        font-size: (360px/20);
    }
}

//  自定义的函数--sass的语法
// px 2to rem
@function p2r($size) {
    @return $size / 18.75 / 2 * 1rem;
}

html的字体大小设置说明（用iPhone6举例）：用设备屏幕宽度除以20纯粹是为了方便计算，原理是将设计稿分为20等份的意思，即20rem就是整个屏幕的宽度，此时1rem等于18.75px，此时rem和px的关系是18.75倍的关系，将px转换为rem除以这个数就得到相应的值，自己可以算算看。

而iPhone6的设计稿是750宽度，为2倍图的关系，$size / 18.75 / 2 * 1rem;再除以2的原因是为了方便可以直接写设计稿上的尺寸，举例设置全屏宽度：750px/18.75/2 = 20rem;

因为rem主要就是用在移动端，如果换成PC的1920的设计稿时公式该怎么变呢？首先还是html字体大小的设置：font-size：（1920px/96）；将设计稿分为96等份，此时1rem=20px;对应的 $size / 20 * 1rem;就得到相应的rem值。

由于屏幕分辨率众多，css里固然不能写全，可使用js动态设置根元素字体大小：

!function(win,doc){
    var root = doc.documentElement;
    function change(){
    	//移动端设计稿20等份的情形下 375/20 =>18.75px ;360/20=>18px
        root.style.fontSize = root.clientWidth / 20 + 'px';
        
		//PC设计稿96等份的情形下 1920/96 =>20px ;
		root.style.fontSize = root.clientWidth / 96 + 'px';
    }
    win.addEventListener('resize',change,false);
    change();
}(window,document);

vscode cssrem 插件使用

使用这个插件的前提依然是确定设计稿的等份比例后去设置默认的字体大小，以750设计稿20等份举例：

rem的使用

依然需要加上之前动态设置html字体大小的js片段，值得注意的是，如果设计稿尺寸变了，要记得更改cssrem里root font-size的大小。

其它插件原理也都差不多的，都是需要设定好1rem相当于多少px的关系才知道代码里怎么写，如果设计稿是多倍图，需要直接写设计图的尺寸的话，则需要除以这个倍数。