Vue仿京东金融页面-移动端自适应

1.推荐使用墨江大神的hotcss移动端布局终极解决方案, github地址为: https://github.com/imochen/hotcss

 

2.Index.html页面设置为

1. <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 入口文件中配置

1. 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

1. loaders: env.production?{
2.             css: ExtractTextPlugin.extract({use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8', fallback: 'vue-style-loader'}),
3.             scss: ExtractTextPlugin.extract({use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader', fallback: 'vue-style-loader'})
4.           }:{
5.             css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
6.             scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
7.           }