vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则(postcss-pxtorem和postcss-px-to-viewport)
在使用vant组件时,vant采用的都是px的绝对宽度,其设计稿是视口宽度为375px作为基准值。我们在开发时,为了自适应宽度,往往采用rem或vm或百分比等相对单位作为宽度。但vant组件写死了,我们如何在代码中不修改vant原生的style,也能让页面在运行时做到自适应变化呢。此时重新启动服务,发现原来vant组件,或原页面中使用的px值,全部自适应为rem了。步骤4:在main.js中引入i
一、vue中自适应rem的设置
新建文件src/libs/rem.js
function setRem() {
// 750px为设计稿视口宽度 字体大小默认18px;
const screenWidth = 750
const scale = screenWidth / 18
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0]
// 设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / scale + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}
以后中所有宽度和大小都用rem表示,不要写px,如果非要写px,可以在vscode下载px to rem组件,写px会自动转换成rem。
最后在main.js或在APP.vue中引入import '@/libs/rem.js'
二、vant组件库px自动修改为相对大小的方法两则(postcss-pxtorem和postcss-px-to-viewport)
在使用vant组件时,vant采用的都是px的绝对宽度,其设计稿是视口宽度为375px作为基准值。我们在开发时,为了自适应宽度,往往采用rem或vm或百分比等相对单位作为宽度。但vant组件写死了,我们如何在代码中不修改vant原生的style,也能让页面在运行时做到自适应变化呢。
方法1:采用postcss-pxtorem组件
步骤1:
npm i postcss-pxtorem --save -dev
步骤2:
在根目录下新建文件 .postcssrc.js,内容如下:
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 9,
propList: ['*']
}
}
}
本方法主要将vant组件原px转化成rem表示的视口大小。注意,这 rootValue: 9是有讲究的,vant中原设计稿为375px,而本项目为750px,比例关系为1:2,所以如果本设计稿中18px表示1rem,则vant设计稿如果要表示本设计稿1rem的宽度要用9px,因此这里rootValue填9,表示本项目所有用到px的地方,要按照9px=1rem进行缩放。
方法二:采用postcss-px-to-viewport组件
步骤1:
npm i postcss-px-to-viewport --save -dev
步骤2:
在根目录下新建文件 .postcssrc.js,内容如下:将vant组件库中px大小转换为vw相对大小,vant组件库中是按照375px=100vm来的,这里只要将viewportWidth设为375,则项目中所有用px表示的地方(也就vant组件库使用了,自己写的css部分都用的rem表示宽度),都等比例缩放自适应当前屏幕宽度
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [], // 设置忽略文件,用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
}
更多推荐
所有评论(0)