vue 使用lib-flexible、px2rem-loader开发移动端

使用vue开发移动端

开发移动端就必须的考虑各种手机屏幕的兼容适配问题了，这里使用lib-flexible、px2rem-loader

1、使用lib-flexble

(1) 安装 lib-flexible

npm install lib-flexble --save

(2)引入lib-flexible, 在main.js中引入

 import "lib-flexible"

通过上面两步，我们基本上解决了vue开发移动端的适配问题。
注意：
1、首先检查index.html中是否存在<meta name="viewport" content="width=device-width,initial-scale=1.0">，如果存在请注释或者删除，因为meta name="viewport"存在的话，flexible会默认使用它而不会生成自己的meta name="viewport"。就达不到我们要搞清适配的问题了。
2、在移动端html的font-size是通过屏幕宽度除以10计算的，所以在设置屏幕宽度时可以设置为10rem；
3、如果我们的设计图为750标准尺寸设计，结果=计量尺寸/20。那是因为展示标准尺寸为375。
4、在开发pc和移动端响应式开发时，可以只引入lib-flexible。但是在只开发移动端时，如果每次冲设计图上计量了尺寸都去换算rem的话，会降低我们的开发效率还会出现错误。这个时候就可以继续使用px2rem-loader，他会自动将css中的px转换为rem。

使用px2rem-loader

(1) 安装 px2rem-loader

npm install px2rem-loader --save

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

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit : 37.5
    }
  }

(3) 打开build/utils.js文件,找到generateLoaders方法替换 const loaders

//原代码
//const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
//替换代码
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader ] : [cssLoader, px2remLoader ]

(4)

//替换 meta name="viewport",也可以不替换，这里不建议写默认meta name="viewport"。lib-flexible会自动生成
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

(5) px2rem-loader 配置完成后需要重新运行项目。npm run dev

px2rem 用法

直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/no/，不会转化px，会原样输出。 --- 一般border需用这个
在px后面添加/px/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

对外部引入css，px2rem能不能转换rem问题

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>

<style>
  /* px2rem不能正常转换 */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem不能正常转换 */
  @import url('../assets/style.css');
</style>

注意：
1、它会编译所有的px,包括引入的element-ui、vant等UI，不适用于pc移动响应式布局。
2、此方法只能将.vue文件style标签中的px和css文件中的px转成rem，不能将script标签和元素style里面定义的px转成rem
3、某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了,
4、当remUnit=37.5时，若设计图是按750像素设计，则真实尺寸=计量尺寸/2。
5、remUnit可以自行定义参数。参数类型为Number。

最后编辑于：2021.11.04 14:55:29