vue2.x 的移动端适配

vue2.0的移动端适配

1. 安装postcss-loader 
	npm i postcss-loader@3.0.0
2. 安装postcss-pxtorem
	npm i postcss-pxtorem@5.1.1
3. 创建postcss.config.js: 如下
4./src/libs/ 创建 rem.js  如下
5. 在 main.js 中 引入 import '@/libs/rem.js'
// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 100, // 已设计稿宽度375px为例 vant用的是375的设计稿
            propList: ['*'],
        },
    },
}
// path: /src/libs/rem.js
const baseSize = 100 // 这个是跟postcss.config.js中rootValue的值是一致的
// 设置 rem 函数
function setRem () {
	// 当前页面宽度相对于 375 宽的缩放比例,可根据自己需要修改。  vantUI使用的人375px页面宽,这里使用375px
	const scale = document.documentElement.clientWidth / 375
	// 设置页面根节点字体大小 最高为两倍图 即设计稿为750
	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

你可能感兴趣的:(vue)