1、效果
一般页面不会随着视口变化而变化
使用lib-flexible插件,根节点会随着视口的变化而变化
iPhone 6/7/8规格 根大小是100px
切换手机规格,如下图所示,根字体大小变化了
2、lib-flexible操作步骤
(1)安装
cnpm install lib-flexible --save
(2)在vue项目中引入
在main.js文件中引入
/ /移动端适配
import 'lib-flexible/flexible.js'
(3)viewprot设置
在index.html入口文件中,设置meta的配置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">
3、postcss-pxtorem操作步骤
postcss-pxtorem插件是将px单位转为rem位置的插件
(1)安装
cnpm install postcss-pxtorem@4.0.1 -D
注:安装时,不要太高版本的,我用webpack 3.版本的,postcss-pxtorem6.0.0版本安装,因为postcss-pxtorem版本太高,报错
(2)在通过脚手架搭的项目,初始生成的.postcssrc.js文件中配置
'use strict'
module.exports = () => ({
plugins: [
require('autoprefixer')({
// 浏览器兼容
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
}),
require('postcss-pxtorem')({
// 根大小
rootValue: 100,
propList: ['*']
})
]
});
4、引入rem.js文件计算根大小值
在main.js同目录下新建立一个rem.js
rem.js文件代码如下:
// 蓝湖上设计稿自定义为375px (默认是iPone6/7/8的宽高)测量值直接写入即可
//当浏览器被重置大小时执行
window.onresize = function () {
getRem(375, 100)
}
function getRem (pwidth, prem) {
var html = document.getElementsByTagName('html')[0]
var oWidth =
document.body.clientWidth || document.documentElement.clientWidth
html.style.fontSize = (oWidth / pwidth) * prem + 'px'
}
//初始加载时,执行
getRem(375, 100)
在main.js中引入rem.js文件
import './rem'
最终效果如下图