移动端适配rem+flexible.js

时间：2021-05-24 14:09:12 收藏：0 阅读：0

一、方法一

安装1：npm i postcss-px2rem --save -dev

安装2：npm i lib-flexible --save

配置1：入口文件main.js中引入：import ‘lib-flexible‘

配置2：在vue.config.js添加以下代码（没有则自己在项目根目录新建一个）

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },

      postcss: {
        // options here will be passed to postcss-loader

        plugins: [
          require(‘postcss-px2rem‘)({
            remUnit: 37.5, //要除以2因为是2倍图，除以2因为第三方插件是1倍的，这里是设计稿的尺寸是750px
          }),
        ],
      },
    },
  },
};

配置3：在项目根目录新建一个rem.js文件，文件里添加以下代码

const baseSize=32
function setRem () {
    const scale = document.documentElement.clientWidth / 750
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + ‘px‘

}
setRem()
window.onresize = function () {
    setRem()
}

配置4：入口文件main.js中引入：import ‘../rem‘(rem.js文件的位置)

二、方法二

安装1：npm install px2rem-loader --save-dev

安装2：npm i lib-flexible --save

配置1：入口文件main.js中引入：import ‘lib-flexible‘
配置2：很重要！！！

（1）打开build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代码

const px2remLoader = {
    loader: ‘px2rem-loader‘,
    options: {
      remUint: 37.5  //根据视觉稿，rem为px的十分之一，375宽度px 37.5rem

}
}

（2）修改generateLoaders方法中的loaders

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

// 修改为
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem

注意：
1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem
2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了

如果还想适配ipad和ipadpro，则在index.html中添加以下代码：

<script>
  /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent) && (head = document.getElementsByTagName("head"), viewport = document.createElement("meta"), viewport.name = "viewport", viewport.content = "target - densitydpi=device - dpi, width = 480px, user - scalable=no", head.length > 0 && head[head.length - 1].appendChild(viewport));
  /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent) && (head = document.getElementsByTagName(‘head‘), viewport = document.createElement(‘meta‘), viewport.name = ‘viewport‘, viewport.content = ‘target-densitydpi=device-dpi, width=480px, user-scalable=no‘, head.length > 0 && head[head.length - 1].appendChild(viewport));
</script>

参考链接：https://www.jianshu.com/p/548091aae26e

参考链接：https://www.jianshu.com/p/bb86c81bb253