用法
引用：<script src="/path/to/hotcss.js"></script>
根据页面渲染机制，hotcss.js必须在其他JS加载前加载，万不可异步加载。
如果可以，你应将hotcss.js的内容以内嵌的方式写到标签里面进行加载，并且保证在其他js文件之前。
为了避免不必要的bug，请将CSS放到该JS之前加载。
css写法
在src/目录下有px2rem.scss/px2rem.less两个文件。没错，这就是hotcss提供的将px转为rem的方法。
推荐使用scss来编写css，在scss文件的头部使用import将px2rem导入
@import '/path/to/px2rem.scss';如果你的项目是单一尺寸设计图，那么你需要去px2rem.scss中定义全局的designWidth。
@function px2rem( $px ){
@return $px*320/$designWidth/20 + rem; /*这是在px2rem.scss中定义的，所有引用此文件的scss文件转换都会以此为标准*/
}
$designWidth : 750; //如设计图是750如果你的项目是多尺寸设计图，那么就不能定义全局的designWidth了。需要在你的业务scss中单独定义。如以下是style.scss
@import '/path/to/px2rem.scss';
$designWidth : 750; //如设计图是750 /*在另一个scss文件 如要适配1150的可以设置此值为1150 前提是你的px2rem中没有设置此值*/$designWidth必须要在使用px2rem前定义。否则scss编译会出错。
注意：如果使用less，则需要引入less-plugin-functions，普通的less编译工具无法正常编译。
想用px怎么办？
直接写px肯定是不能适配的，那hotcss.js会在html上注册data-dpr属性，这个属性用来标识当前环境dpr值。那么要使用px可以这么写。
//scss写法
#container{
font-size: 12px ;
[data-dpr="2"] &{
font-size: 24px;
}
[data-dpr="3"] &{
font-size: 36px;
}
}接口说明
initial-dpr
可以通过强制设置dpr。来关闭响应的viewport scale。使得viewport scale始终为固定值。
<meta name="hotcss" content="initial-dpr=1">
<script src="/path/to/hotcss.js"></script>
<!--
如iphone微信强设dpr=1，则可以长按识别二维码。
注意，强制设置dpr=1后，css中的1px在2x，3x屏上则不再是真实的1px。
-->max-width
通过设置该值来优化平板/PC访问体验，注意该值默认值为540。设置为0则该功能关闭。 为了配合使用该设置，请给body增加样式width:16rem;margin:0 auto;。
<meta name="hotcss" content="max-width=640">
<script src="/path/to/hotcss.js"></script>
<!--
默认为540，可根据具体需求自己定义
-->
<style>
body{
width: 16rem;
margin: 0 auto;
}
</style>design-width
通过对design-width的设置可以在本页运行的JS中直接使用hotcss.px2rem/hotcss.rem2px方法，无需再传递第二个值。
<meta name="hotcss" content="design-width=750">
<script src="/path/to/hotcss.js"></script>hotcss.mresize
用于重新计算布局，一般不需要你手动调用。
hotcss.mresize();hotcss.callback
触发mresize的时候会执行该方法。
hotcss.callback = function(){
//your code here
}单位转换hotcss.px2rem/hotcss.rem2px
hotcss.px2rem 和 hotcss.rem2px。你可以在meta中设置design-width，则之后使用这两个方法不需要再传递第二个参数。
迭代后仍然支持在js中设置hotcss.designWidth，推荐使用meta去设置。
/**
* [px2rem px值转换为rem值]
* @param {[number]} px [需要转换的值]
* @param {[number]} designWidth [设计图的宽度尺寸]
* @return {[number]} [返回转换后的结果]
*/
hotcss.px2rem( px , designWidth );
/**
* 同上。
* 注意：因为rem可能为小数，转换后的px值有可能不是整数，需要自己手动处理。
*/
hotcss.rem2px( rem , designWidth );
//你可以在meta中定义design-width，此后使用px2rem/rem2px，就不需要传递designWidth值了。同时也支持旧的设置方式，直接在JS中设置hotcss.designWidth
hotcss.px2rem(200);
hotcss.rem2px(350);scss转为css方法（gulp）
npm和gulp的安装就不讲了
1.在项目文件夹下运行一下命令进行初始化
npm init -y2.运行gulp
npm install -D gulp3.安装依赖库 gulp-sass
npm install -D gulp-sass4.创建Gulp脚本文件gulpfile.js
// 加载gulp
const gulp = require('gulp');
// 读取用于编译Sass的插件
const sass = require('gulp-sass');
// 定义gulp任务
gulp.task('default', function (done) { //参数1：任务名称，后面执行gulp时对应名称 参数2：回调 传入done表明执行结束
gulp.src('css/style.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
done();
});5.运行脚本
npx gulp6.监听
通常情况下，Sass文件的修改频率并不低，如果每一次修改都要手动指定任务，并运行我们的gulp脚本，是在是太麻烦了。
下面我们就尝试利用gulp的watch功能，实现每当Sass文件的内容发生改变，就会自动执行对应的命令，重新进行编译。
其实它的用法相当简单，
gulp.watch("要监视的文件", 要进行的响应处理)利用这个函数，我们将原来的Gulp脚本文件gulpfile.js修改如下
// 加载gulp
const gulp = require('gulp');
// 加载处理Sass文件的gulp插件
const sass = require('gulp-sass');
// 定义默认任务
gulp.task('default', function (done) {
// ★ 监视style.scss文件的变化
gulp.watch('css/style.scss', function () {
// 一旦style.scss的内容发生变化，则进行下面的处理
// 读取style.scss文件的内容
gulp.src('css/style.scss')
// 进行Sass文件的编译
.pipe(sass({
outputStyle: 'expanded'
})
// 定义Sass文件编译过程中发生错误的响应处理(如果没有它，一旦发生错误则直接退出脚本)
.on('error', sass.logError))
// 编译后的css文件保存在css目录下
.pipe(gulp.dest('css'));
});
done();
});
