Vue适配移动端，动态计算rem

林中明月间。

已于 2023-12-26 16:35:15 修改

阅读量2.5k

点赞数 2

分类专栏： Vue.js 文章标签： Vue移动端

于 2019-07-30 22:06:12 首次发布

原文链接：https://www.jianshu.com/p/3163bc9f7e47

版权

Vue.js 专栏收录该内容

195 篇文章 21 订阅

订阅专栏

vux 下设置移动端 rem，自动更改html font-size(main.js下添加)_sugang666的博客-CSDN博客

vue中使用rem布局，使用js动态改变fontsize - 简书

第一种：

前提页面头部设置<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

//引入rem.js,在assets中创建rem.js 再main.js (入口)中引入

import './util/rem'

或者直接在 index.html 下面加 <script></script>里(我就不引入了)

<script>
      // 在标准 375px 适配下，100px = 1rem;
      (function (doc, win) {
        var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
        var clientWidth = docEl.clientWidth;
        console.log(clientWidth)
        docEl.style.fontSize = (clientWidth >= 750) ? "100px" : 100 * (clientWidth / 750) + "px"
        console.log(docEl.style.fontSize)
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

第二种：

1.安装插件

npm i lib-flexible --save        // 载lib-flexible
npm install px2rem-loader        // 安装px2rem-loader

2.在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.在index.html中引入：移动适配meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4.更改配置

　　在 build/util.js 中按如下两更改

　　（1）将px2rem-loader添加到cssLoaders中

const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    //一般设置75
    remUnit: 75 // 37.5按照375设计图尺寸在设计，75安装750设计图尺寸设计
  }
}

（2）、在generateLoaders方法中添加px2remLoader 直接复制可以

function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
 
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
 
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

　5.重启

npm run dev

这里需要注意：

1、 lib-flexible：是 rem 的适配插件。（例：750px == 10rem）

1px的边框容易缺失，使用 /no/ 语法来屏蔽该属性转换

遇到的坑：

插件会转化所有的样式的px。比如引入了第三方UI，也会被转化。使用selectorBlackList字段，来过滤。实际上还是会存在这个问题
不想px被转化成rem，可以简单的使用大写PX或者是Px；