移动端布局自适应的方法

谁借莪１个温暖的怀抱￠ 2022-05-21 12:45 377阅读 0赞

# 一、lib-flexible #

flexible毫无疑问在移动端自适应上还是很方便的，具体用法如下

1.安装flexible.js

npm install lib-flexible --save

2.入口文件main.js引入

import 'lib-flexible'

3.安装px2rem

npm install px2rem-loader --save

4.配置px2rem

找到 build/utils.js文件，在utils.js中添加

![70][]

![70 1][]

ok,现在你只需要按照设计稿上的px直接写布局，就会发现在各平台布局完全一致了(配置完以后不要忘记重启项目)

# 二、手动计算分辨率 #

rem是css的单位，rem的自适应布局是通过设置html标签下的font-size的大小来实现的，其实在使用flexible的时候你就会发现每次切换分辨率，每次都会给html设置不同的font-size，所以从原理上来说是一样的。

1.设置html下font-size:62.5%

因为100%是16px,所以设置为62.5%的话，设计稿的10px就可以直接写1rem，不过可以给你的ide装一个css转rem的插件(vscode-cssrem)，配置好转化比例，写css的时候就不用自己去计算了

![70 2][]

2.计算分辨率

按照步骤一的写法只能保证在设计稿上的分辨率是完全可以的，但是肯定是需要在不同分辨率显示一样的，所以还需要这段代码

var fun = function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
    
          //这里是假设在640px宽度设计稿的情况下，1rem = 20px；
          //可以根据实际需要修改
          docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    }
    fun(document, window);

或者

当然大多数情况下，分辨率相差不多的情况下也不需要js计算1rem到底是多少px

[70]: /images/20220521/26b1279a0b244d6c84fda90bb2f92fed.png
[70 1]: /images/20220521/869fea8628d84296aab5e790ed1332ae.png
[70 2]: /images/20220521/77c7aff6525649a494d792154aa9e7c0.png