当前位置: 首页 > news >正文

前端vue 项目px转为rem的自适应解决方案

postcss-pxtorem(或是postcss-px2rem)

npm install postcss-pxtorem amfe-flexible --save-dev

在入口文件 main.js 中引入 amfe-flexible(响应式适配):

main.js

import 'amfe-flexible' // 自动设置 html 的 font-size

vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 192,
              unitPrecision: 5,
              propList: ['*']
            })
          ]
        }
      }
    }
  }
})

rootValue 的值是根据屏幕分辨率宽或是设计稿宽度除以 10,例如1920 * 1080的设计稿,此处rootValue:192

但是每次打开调试工具栏后,或是改变浏览器窗口大小, html 的 font-size 总是会自动变化,很不方便。

可以将 html 和 body 的 font-size 设置成固定值然后不使用 amfe-flexible

    <style>
      html {
        font-size: 192px;
      }
      body {
        font-size: 16px;
      }
    </style>

此种方案的样式需要写在css中,对于行内style中的样式不起作用

为使行内样式也起作用可以使用  style-rem-loader

npm install style-rem-loader --save-dev

  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('style-rem-loader')
      .loader('style-rem-loader')
      .options({
        viewportWidth: 1920,
        unitPrecision: 5
      })
  },
http://www.dtcms.com/a/129881.html

相关文章:

  • open harmony多模组子系统分析
  • BM25、BGE以及text2vec-base-chinese的区别
  • [dp8_子数组] 乘积为正数的最长子数组长度 | 等差数列划分 | 最长湍流子数组
  • UE5角色状态机中跳跃落地移动衔接问题
  • markdown导出PDF,PDF生成目录
  • goc知识点
  • Symbol
  • C++学习之路,从0到精通的征途:string类的模拟实现
  • 操作系统基础:06 操作系统历史
  • C++ CUDA开发入门
  • VectorBT量化入门系列:第六章 VectorBT实战案例:机器学习预测策略
  • vue3动态路由
  • Cyber Weekly #51
  • C++ 回调函数应用实战:深入理解与高效使用回调函数
  • 网络互连与互联网
  • redis哨兵机制 和集群有什么区别:
  • 用哪个机器学习模型 依靠极少量即时静态数据来训练ai预测足球赛的结果?
  • LeetCode算法题(Go语言实现)_44
  • Linux基本指令2
  • Day 11
  • linux网络设置
  • 协程的原生挂起与恢复机制
  • 【深度学习与大模型基础】第10章-期望、方差和协方差
  • 文献分享: DESSERT基于LSH的多向量检索(Part3.2.外部聚合的联合界)
  • lx2160 LSDK21.08 firmware 笔记 - 0.基于fip.bin 编译流程展开的 makefile 分析
  • DrissionPage详细教程
  • Django3 - 建站基础
  • AcWing 5969. 最大元素和
  • openapi + knife4j的使用
  • C++动态规划基础入门