【vue项目适配可借助于插件lib-flexible 和postcss-px2rem】

前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem。

lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体大小。

postcss-px2rem插件的作用:将px转为rem,如此以来我们可以在开发的过程中使用px单位。

注意:该插件不适用于行内样式,如使用行内样式,postcss-px2rem 则不能将px转为rem

具体使用方法如下:

一、下包(使用yarn或者npm都可)

1、yarn 命令下包

javascript 复制代码
yarn add lib-flexible postcss-px2rem

2、npm命令下包

javascript 复制代码
npm i lib-flexible postcss-px2rem

二、更改插件配置

1、更改lib-flexible插件的配置

找到node_modules文件夹下的lib-flexible下的flexible.js文件,修改refreshRem 函数

javascript 复制代码
 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540* dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

改为

javascript 复制代码
 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;//-------------------
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

2、配置postcss-px2rem

在vue.config.js文件中追加如下代码

javascript 复制代码
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 192, // 设计稿十等分后的值1rem=192px
  remPrecision: 6 // 转化后小数点位数
})
 
module.exports = {
  css: {
    // PC分辨率端适配
    loaderOptions: {
      css: {},
      postcss: {
        plugins: {
          postcss
        }
      }
    }
  }
}

注意:修改vue.config.js代码需要重启项目

三、重启项目测试

f12控制台检查html标签,当html标签设置了font-size即说明lib-flexible插件生效

检查样式px是否转为rem,如转为rem即生效

ps:在适配过程中,刚开始我的单位px未转化为rem,最后将vue/cli版本从5.0.8降低为4.5.15才生效。

如使用 px2rem-loader 插件适配,采用如下方式配置,则注意px2rem-loader插件配置方式对scss代码并不生效,需为css,不能使用scss

javascript 复制代码
 chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192, // 根据视觉稿,rem为px的十分之一,1920px  192 rem
        remPrecision: 8// 换算的rem保留几位小数点
      })
  }

原文链接:https://blog.csdn.net/weixin_45371730/article/details/126404369

相关推荐
慧一居士12 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead14 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app