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

前言

当拿到一份宽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。就可以愉快的写代码了

相关推荐
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js