1、

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

2、

安装插件

npm i postcss-px2rem

编写配置文件

编写核心代码，命名随意，我这里命名为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

Vue项目使用px2rem相关推荐

vue项目的骨架及常用组件介绍
vue项目基础结构一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
vue项目中使用postcss-px2rem的方法总结
vue项目中使用postcss-px2rem的2种方法在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方 ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue项目nginx部署子目录_vue 多项目部署---二级目录
新项目:同一域名下部署多个vue项目, 根目录vue项目不需要按下面的方式进行打包部署 https://www.bitedit.com/ 下面三个项目以二级目录部署 https://www.bited ...
【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）
官方帮助文档http://www.electronjs.org/docs 有时候运行安装依赖包会很慢建议在(c)npm config edit之后弹出的.(c)npmrc记事本里面加入 electro ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
【1】用命令行搭建Vue项目
先安装Node.js http://nodejs.cn/download 推荐国人安装淘宝npm镜像 npm install -g cnpm --registry=https://registry.n ...

Vue项目使用px2rem

Tips

Vue项目使用px2rem相关推荐

最新文章

热门文章