前言

当拿到一份宽750px的设计稿时，有的小伙伴发愁，rem到底该怎么定义。今天我就来说说这其中的门道。

rem与设计稿的对应关系

先上图

设计稿	分数（页面划成几份）	每份的宽度（即html中font-size的值）	每份的宽度占比设计稿（即font-size=?vw）
750px	15	750/15=50px	50/750=0.6666666667=6.666667vw
750px	10	75px	10vw
750px	7.5	100px	13.33333333vw
375px	15	25px	6.6666667vw
375px	10	37.5px	10vw
375px	7.5	50px	13.3333333vw

rem是等于html的font-size的值。那么这个值是多少有讲究的。

就是看你将浏览器的屏幕或者说设计稿划分成几份。具体对应关系如上表所示。

那么就以7.5份举例。为什么是7.5份，因为750/7.5=100px,即1rem=100px，方便计算嘛。

现在拿到一份750的移动端设计稿，在写代码时设计稿中元素要除以100得到rem值，举例：750的设计稿某元素是宽，高100px，那么在代码中就要写宽，高是1rem。

那么具体要怎么样设置才能达到效果呢？

使用js来划分设计稿

js 复制代码

<script>

      (function (doc, win) {

        var docEl = doc.documentElement,

          resizeEvt =

            "orientationchange" in window ? "orientationchange" : "resize",

          recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            if (clientWidth >= 750) {

              docEl.style.fontSize = "100px";

            } else {

              docEl.style.fontSize = 100 * (clientWidth / 750) + "px";

            }

          };  


        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        doc.addEventListener("DOMContentLoaded", recalc, false);

      })(document, window);

    </script>

当引用这串代码的时候，表示当浏览器的宽度大于或等于750时，html的font-size=100px,即1rem=100px。根据上表所示就是将750设计稿分成了7.5份

当浏览器的宽度小于750时就动态设置font-size。怎么设置的呢？100 * (clientWidth / 750) + "px"

js 复制代码

100 * (clientWidth / 750) = clientWidth * 100/750 = clientWidth * 0.133333333333

浏览器的宽度=clientWidth=100vw  


所以：clientWidth * 0.133333333333= 100vw * 0.133333333333=13.33333333vw

以上的js代码就是动态设置html的font-size的值。font-size的值逻辑是clientWidth大于等于750px用750px小于750时用13.3333333vw,其标准是将clientWidth等分7.5份。而且根据上表显示只要划分的份数相同，那么每份的宽度占比设计稿。所以我们也可以将其用css代码简写。

css 复制代码

html{

    font-size:13.3333333vw  


} 


@media screen and (min-width:750px){

    html{  

        font-size:100px

    }

}  


body {      

  min-width: 320px;

  max-width: 750px;

  width: 7.5rem;

  margin: 0 auto;

  font-family: -apple-system, blinkmacsystemfont, Helvetica Neue, helvetica,

    segoe ui, arial, roboto, PingFang SC, miui, Hiragino Sans GB,

    Microsoft Yahei, sans-serif;

  font-size: 18px;

  line-height: 1.8286;

  color: #fff;

}

如果给的是375的设计稿呢。根据上表得知375分成7.5份，1rem=50px。所以在设计稿中的px元素除以50得到rem值。

此时就难以计算了。

所以推荐使用vscode的插件px to rem。然后在插件设置中设置好1rem=50px。就可以愉快的写代码了

一文搞懂移动端设计稿与rem设置

前言

rem与设计稿的对应关系

使用js来划分设计稿