在项目中用到UI给出设计图尺寸是1920x1080,如果直接在样式中使用会导致比想象中要大很多,这样需要做px转换为rem来适应屏幕,网上查了很多方法,下面是总结出的一种方法,亲测有效
1.安装依赖 postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save-dev
2.创建个rem.js文件,用于计算文档字体大小,我是放到utils下面的看个人习惯
// 设置 rem 函数
function setRem() {
let pageWidth = window.innerWidth;
//为了ie也能拿到可视窗口宽度
if (typeof pageWidth != "number") {
//标准模式
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
//怪异模式
} else {
pageWidth = document.body.clientWidth;
}
}
if (pageWidth <= 750) {
const baseSize = 75
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / pageWidth
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
} else if (pageWidth > 750 && pageWidth <= 1200) {
const baseSize = 85
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / pageWidth
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
} else {
const baseSize = 100
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
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/rem'
3.配置下载的依赖
在项目根目录找到.postcssrc.js,添加如下代码
module.exports = {
"plugins": {
//配置这一段
'postcss-px2rem-exclude':{
"remUnit": 100,//转换基数
exclude:/node_modules|folder_name/i //过滤依赖文件,防止第三方UI组件样式被干扰
}
}
}
如果你的项目没有生成这个独立文件,就需要在你的package.js里设置。
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
}
注意:
1.因为html的font-size是根据屏幕宽度除以10计算出来的,所以我们需要设置页面的最大宽度是10rem。
2.如果每次从设计稿量出来的尺寸都手动去计算一下rem,就会导致我们效率比较慢,还有可能会计算错误,所以我们可以使用postcss-px2rem-exclude自动将css中的px转成rem
3.在引入依赖后,就可以直接使用rem了,例如UI的尺寸是300px ,在样式直接写300rem就可以了,但是,会出现一个问题,第三方组件的UI整体变小了,这里还需要配置一个地方,项目build目录下找到utils.js文件,找到generateLoaders方法,做如下修改:
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]//将这行改为下面这行
const loaders = options.usePostCSS ? [cssLoader] : [cssLoader]
保存后重新编译项目就解决问题了