一文搞懂移动端设计稿与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。就可以愉快的写代码了

相关推荐
前端Hardy18 分钟前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy20 分钟前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙44 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端1231 小时前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天1 小时前
前端 9大 设计模式
前端
搞个锤子哟1 小时前
网站页面放大缩小带来的问题
前端
hj5914_前端新手1 小时前
React 基础 - useState、useContext/createContext
前端·react.js
半花1 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试1 小时前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop81 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket