h5项目需要对移动端不同尺寸的屏幕进行适配,网上有很多种方案,下面采取了淘宝的适配方案
引入适配方案
(1)通过cnpm install amfe-flexible
安装第三方包
(2)在main.js中import 'amfe-flexible'
全局引入第三方包
淘宝适配方案是对不同屏幕下的动态设置根元素字体大小,然后可以配合rem实现对尺寸的动态控制,也可以在通过px转rem插件来实现。
postcss插件
(1)通过npm install postcss-pxtorem -D
安装第三方包
(2)然后在项目的根目录创建postcss.config.js文件并进行一下配置:
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
},
}
(3)然后页面中可以使用px单位,在项目打包时会通过插件自动转换成rem单位。
通过淘宝适配方案和pxtorem插件可以对不同屏幕下的设备完美适配。