vue手机端项目自适方案

lib-flexible解决移动端自适应


花了一个多小时终于解决了这个问题,最近总是在研究如何做好自适应,搜了很多方法,但是总是感觉不尽人意,比如以实际尺寸除以75得出rem,或者是那种px乘以二的,因为之前不太清楚清楚,导致不能理解。功夫不负有心人,总算总结了一个比较满意的方法。
利用淘宝给出的lib-flexible,解决。
首先安装它,
npm i lib-flexible --save,
计算起来比较麻烦,为了能直接写px还应该安装一个它的兄弟-----px2rem-loder
npm i px2rem-loader
安装完之后需要做的是在main.js引入它
import 'lib-flexible'
最重要的两步来了,首先注释掉index.html中的meta=viewport标签,因为这玩意与flexible会有一定的冲突,

不用担心,自动的给我们生成了一个,看到没而且有了根元素的font-size值,此时1rem就是等于这个根元素,不要问我为什么知道,因为毕竟智慧担当~~~~哈哈。
如果你不想每次都计算,请配置一下它的兄弟,相当重要的,安装好后要在build 中until.js修改,把px2rem-loader加在cssLoaders 中和 generateLoaders中。添加位置如下:
1、

要添加的代码,是不是很容易懂
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }
2、

别忘了注释掉之前的const loaders 
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

猜你喜欢

转载自blog.csdn.net/MercedesCc/article/details/80938718