一、下载 postcss-pxtorem
运行 npm install postcss-pxtorem
完成下载之后,在package.json文件中添加这段代码
"postcss": { // 新添加的
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
"browserslist": [ // 之前就有的,作为位置参照放在这里
"> 1%",
"last 2 versions",
"not ie <= 8"
]
二、在项目utils文件夹,创建rem.js文件
添加下列代码
function setRem() {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
let htmlDom = document.querySelector('html')
htmlDom.style.fontSize = htmlWidth / 20 + 'px'
}
setRem();
window.onresize = function () {
setRem()
}
三、在main.js中引入
import './utils/rem.js'
移动端H5页面在PC端固定视图大小
- clientWidth:浏览器窗口文档显示的宽度。
- offsetWidth:根节点html元素对象的宽度。
把clientWidth改成offsetWidth。
然后找到vue项目中的public文件夹里面的index.html,在这个文件中把html标签后面添加 style='max-width:750px ; margin: 0 auto'
。
这样之后在PC端无论浏览器宽度有多大,它只会最大显示宽度为750px宽度时候的自适应样式。