移动端 rem 布局

2021-07-28 本文已影响0人前端小白的摸爬滚打

关于移动端布局的一些思考：

问题 1：为什么设计师给的设计稿总是 640px 或 750px（现在一般以 Phone6 为基准，给的 750px）

问题 2：为什么我们拿到 640px 和 750px 的设计稿，在编码的时候都要除以 2,

（比如设计稿上有一个图标宽高是 4040，我们需要先除以 2，实际编码时候宽高要写成 2020）

1033257-20180906100351775-1261095461.png

关键就是要搞清楚 px 和 pt

pt：逻辑像素或逻辑分辨率

相当于我们用浏览器模拟调试移动端时看到的各手机的像素，如下图 iPhone6 看到的宽高 375*667，

这个就是逻辑像素，也可以看做是一个长度单位 (我们在 CSS 中设置的像素也是逻辑像素)

px：物理像素或物理分辨率，又被称为设备像素

图中的 750*1334 就是物理像素，它不能看做是一个长度单位，可以看做是一个点，即像素点

结论：pt 和 px 的关系就是—— 1pt 里面有几个像素点

（比如 1pt 里面有 1 个 px，也可以有 2 个，3 个，分别对应上图的@1x,@2x,@3x

所以为什么设计稿 640px 和 750px 要除以 2，就是因为设计师给的 640px 和 750px 是物理像素

而我们在浏览器模拟调试移动端的时候看到的像素是逻辑像素

(function (doc, win) {
  var docEl = doc.documentElement, //document文档对象
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //窗口旋转或者大小改变 事件
    recalc = function () {
      var clientWidth = docEl.clientWidth; //页面宽度
      if (!clientWidth) return;
      // 1rem 就是 50px (对于宽度是375px的设备来说) === 物理像素的100px 优点就是在设备宽度是375的设备上 我们的 rem的值可以直接
      // 使用设计稿的像素/100即可
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false); //绑定窗口变化事件（设置根字体）
  doc.addEventListener('DOMContentLoaded', recalc, false);//绑定页面装载成功的事件（设置根字体）
})(document, window);

我们想要的结果很简单: 一个元素的宽度（px) / 屏幕宽度(px) = 定值（这个定值就是设计稿上面的值比例定值）；

——所以要做就是：屏幕变宽，要让元素宽度就变宽。

移动端适配 rem 和 vw

vw 是屏幕宽度的百分之一

就是开发的时候用的 750 设计稿的尺寸；单位是 px；
然后编译工具，如 postcss 会自动将 px 单位转成对应 rem 和 vw 单位；
如果是 vw 很好转，比如写的 40px；40/750 vw 就完了；
如果是 rem 就多一步罢了；要用 js 计算出根字体大小，并设置给 html；

正常是屏幕大小 375px ，字体大小 16px;所以比例常数就是 : 屏幕尺寸/750*32 ，也就是 html 根字体大小

40px 的 rem 就是： 40/(屏幕尺寸/750*32)

动态改变(屏幕尺寸/750*32) 这个根字体就可以动态适应屏幕了

这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！

目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了 vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿

目标二、px 转换成 rem：一般 UI 给的设计稿宽度大小是 750，所以，我们想直接写上面 UI 标记的尺寸；——最大程度减少工作

为什么选择 rem?

很久之前没有 vw，怕 vw 的兼容问题，就用了 rem；也就是：rem 的兼容性>vw 的兼容性；（vw 的适配方案！非常简单！）；

结合 postcss 自动帮我们计算 rem

在项目根目录下添加.postcssrc.js 文件，在里面写上

module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};

就完了。简单解释下，免得你们百度半天，建议自己在 npm 官网上看 postcss-pxtorem 的文档。rootValue，这里就是根目录的字体大小是 32px，这里为啥设置成 32 呢，因为一般设计稿是 750，比 iphone6 的大一倍，所以设置成 16 的两倍，就是 32px 这样我们就可以直接在代码里写设计稿上的 css 大小了;proplist 就是那些属性需要转换成 rem，这里是全部的意思；

minPixelValue 就是最小转换单位，这是最小转换单位是 2px 的意思；

或者使用 vscode 插件 cssrem,默认是1rem = 16px

修改rootFontSize为32px

1423556-20200815004429739-573251919.png

注意：修改之后需要重启vscode

(function() {

    function autoRootFontSize() {

        document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';

          // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单

    }

    window.addEventListener('resize', autoRootFontSize);

    autoRootFontSize();

})();

移动端 rem 布局

移动端适配 rem 和 vw

为什么选择 rem?

猜你喜欢

热点阅读