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

两员123456
1,568 阅读4分钟

前言

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

rem与设计稿的对应关系

先上图

设计稿分数（页面划成几份）每份的宽度（即html中font-size的值）每份的宽度占比设计稿（即font-size=?vw）
750px15750/15=50px50/750=0.6666666667=6.666667vw
750px1075px10vw
750px7.5100px13.33333333vw
375px1525px6.6666667vw
375px1037.5px10vw
375px7.550px13.3333333vw

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

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

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

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

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

使用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"

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代码简写。

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的设计稿呢。与750的设计稿的css简写代码照搬过去。只有一点区别：375的设计稿中对照的是1rem=50px，所以在设计稿中的px元素除以50得到rem值。

为什么会这样呢？因为它们都是划分成7.5份的 举个例子：750设计稿内的元素是要除以100得到rem值的，那么取一个极值就让750 / 100 =7.5 375设计稿内的元素是要除以50得到rem值的，取一个极值就让375 / 50 = 7.5

它们是等比例缩放了。也就是说375设计稿写出来的效果，浏览器屏幕放大到750时候就和用750设计稿写出来的页面效果一致。反之用750设计稿写出来的效果，浏览器屏幕缩小到375时候就和用375设计稿写出来的页面效果一致

所以不论是给375的设计稿还是750设计稿写出来的代码是一样的，呈现的页面布局也是一样的

但是除以100好计算，除以50就难以计算了。

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

总结

无论是给什么样的设计稿，最后呈现出来的页面效果是一致的。这里的关键因素就是要决定将页面划成几份。

以上我是以7.5份举例的，只是因为得到的1rem=100px或50px，便于计算而已。当使用插件px to rem时候，这个就不再是问题。你想划分成几份就划分成几份。

比如，你觉得13.3333333vw是个无限小数不好看，你可以选择划分成10份，得到font-size=10vw

比如750的设计稿，划分成10份，那么根据上表css就可以这么写。当然,要记得插件中设置成1rem=75px

html{
    font-size: 10vw;
}


body {
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    font-family: -apple-system, blinkmacsystemfont, Helvetica Neue, helvetica, segoe ui, arial, roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
    font-size: 14px;
    line-height: 1.4286;
    color: #666;
    margin: 0 auto;
}

@media screen and (min-width:750px) {
    html{
        font-size: 75px;
    }
}

创作不易，如果觉得俺写的不错，请给俺点点赞吧！

avatar
文章
阅读
粉丝