vue2使用hotcss进行移动端适配

其实hotcss原作者在GitHub上的教程已经很清楚了，但是鉴于很有很多小朋友还是看不明白，这里再补充一些

GitHub地址：https://github.com/imochen/hotcss

项目使用vue init webpack Pro_name构建

安装依赖包

scss使用

npm install node-sass style-loader [email protected] -D

注意sass-loader 最新版本8.0.2会有问题，所以这里用的是7.3.1版本

在build文件夹下面的webpack.base.conf.js文件里面添加规则

{

    test: /\.sass$/,

    loaders: ['style', 'css', 'scss']

}

放到module.rules里面即可

移动端配合px2rem使用更佳

下载px2rem.js文件然后直接在main里面import引入

新建px2rem.scss文件，里面这些就够了

@function px2rem($px) {

    @return $px*320/$designWidth/20+rem;

}

$designWidth: 1080; // 设计图横屏多少就是多少，这里按照1080来

写样式的时候引入scss文件

使用：

@import "./../assets/px2rem.scss";

.phone {

  font-size: px2rem(40);

}

现在还有一个问题是必须每个文件都要引入这个文件，暂时还没有全局使用的方法，不知道有没有大佬能指点一番