Vue项目使用px2rem

简介: Vue项目使用px2rem

设计稿给的是px,但是需要做自适应,老生常谈的问题了,使用flex布局+rem+按比例设置根节点font-size大小来实现,这里最麻烦的就是把px改写成rem,手工改重复性太大,所幸,可以使用webpack插件在打包过程中帮我们自动转化

使用方法
1.安装包

npm i postcss-px2rem

2.编写配置文件
编写核心代码,命名随意,我这里命名为px2rem并放在src/utils文件夹内


// 基准大小
const baseSize = 100
// 设置 rem 函数
function setRem() {
   
  // 当前页面宽度相对于 1920 宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
   
  setRem()
}

在main.js中引入刚才的文件


import "./utils/px2rem"

vue.config.js中引入px2rem包并在css plugins里启用postcss插件


const px2rem = require('postcss-px2rem')
const postcss = px2rem({
   
  remUnit: 100   //基准大小 baseSize,需要和rem.js中相同
})
module.exports = {
   
  css: {
   
    loaderOptions: {
   
      postcss: {
   
        plugins: [
          postcss
        ]
      }
    }
  }
}

Tips
行内样式的px不会转换成rem
UI库如果要改变样式,在样式的单位要使用rem
不想转换成rem的话将px写成PX

相关文章
|
1天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
1天前
|
JavaScript
vue知识点
vue知识点
13 5
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
3天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
17 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
8 0
|
3天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
11 0
|
3天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
10 0
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
127 0
重读vue电商网站45之项目优化上线
|
4天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1