移动端布局自适应的方法

一、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中添加

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的时候就不用自己去计算了

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);

或者

!function () {
      var htmlEl = document.getElementsByTagName('html')[0];
      var fitPage = function () {
        var w = htmlEl.getBoundingClientRect().width;
        w = Math.round(w);
        w = w > 750 ? 750 : w;
        var newW = w / 750 * 100;
        htmlEl.style.fontSize = newW + 'px';
      }
      fitPage();

      var t;
      var func = function () {
        clearTimeout(t);
        t = setTimeout(fitPage, 25);
      }
      window.addEventListener('resize', func);
    }();

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值