1.推荐使用墨江大神的hotcss移动端布局终极解决方案, github地址为: https://github.com/imochen/hotcss
2.Index.html页面设置为
-
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
3.下载hotcss.js",重命名我viewport.js ,并在webpack 入口文件中配置
-
entry: ['./app/js/viewport.js','./app/js/main.js'],
4.在vue中配置px2rem-loader,在开发时只使用px,px2rem把px转成rem,再动态的计算font-size。
安装px2rem-loader, cnpm install px2rem-loader
5.Webpack配置 px2rem-loader
-
loaders: env.production?{
-
css: ExtractTextPlugin.extract({use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8', fallback: 'vue-style-loader'}),
-
scss: ExtractTextPlugin.extract({use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader', fallback: 'vue-style-loader'})
-
}:{
-
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
-
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
-
}