一、相关概念
物理像素：显示器上最小的物理显示单元 (mm,cm，m)
设备独立像素：px
设备像素比(device pixel ratio)： 定义了物理像素和设备独立像素之间的对应关系
设备像素比(dpr)=物理像素/设备独立像素
二 使用方法：
在页面的<head></head>中引入 flexible_css.js,flexible.js文件：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>除了上面这种方式外，你还可以把这两个文件下载到自己的项目中，然后再引入，效果是一样的。
上面两个文件其实就是一个 .css 文件（样式初始化，可以不用）和一个 .js 文件
三 flexible.js 内部做的事情
1 如果html页面页面中有设置的 inital-scale的值 x，则dpr=x，否则默认dpx=2
2 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值 =dpr
3 给<html>元素添加font-size属性，并且动态改写font-size的值 = window.width()/10，即是 1rem= window.width()/10
4给<body>元素添加font-size属性 1倍=12px（暂时没有发现有啥用，建议字体不用rem转化）
四 px和rem的转换关系
例如设计图是375px，且inital-scale设置为1
div的宽度是100px
则实际css样式是w=100/37.5rem
五 自动转化方法
1安装
- 克隆项目 https://github.com/hyb628/cssrem.git
- 进入packages目录：Sublime Text -> Preferences -> Browse Packages...
- 复制下载的cssrem目录到刚才的packges目录里。
- 重启Sublime Text。
基准值默认是1rem=40px，可以设置基准值 ：
参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem-->settings user
- px_to_rem - px转rem的单位比例，默认为40。
- max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
- available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。
配置好的文件，可参考：
{
"px_to_rem":36,
"max_rem_fraction_length":3,
"available_file_types":[".html",".css",".less",".sass"],
}
2 自己写或者用less sass的混合宏