认识em、rem单位以及cssrem自动换算工具
仅供学习，转载请注明出处
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：响应式布局+流体布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局
基于rem的布局
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
好了，上面看了一堆文字的解析，下面来写几个例子来看看。
em单位示例
可以从示例看出，两个div样式的宽高都是同样的10em ，但是显示的大小都不一样。
主要的原因就是 em 是基于元素自身的font-size大小来设置尺寸的。那么具体是多少尺寸呢？
第一个div实际尺寸是 width:120px; height:120px;
对应尺寸：font-size:12px; width:10em; height:10em;
那么就是说 实际尺寸 = 12px(font-size) ✖ 10(em) = 120px
好了，下面再看看第二个div的实际大小，如下：
可以看到第二个div的实际尺寸就是width:200px; height:200px。
也就是 实际尺寸 = 20px ✖ 10em = 200px
从上面两个div可以知道，em 的计算尺寸是基于自身元素样式中的font-size大小来计算的。
那么rem就不是基于自身元素了，而是基于html标签的font-size大小来计算的。
rem单位示例
看了上面这个示例基本已经知道div的大小就是 width:200px; height:200px。
实际大小 = 20px(font-size) × 10(rem) = 200px
下面来看看实际大小确认一下，如下：
那么，如果使用rem单位每次都需要自己去计算的话肯定很不方便，下面介绍一款工具，可以自动帮助计算的。
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸。
下载本项目
访问一下这个github看看，如下：
首先下载项目下来先。git clone https://github.com/flashlizi/cssrem
进入packages目录：Sublime Text -> Preferences -> Browse Packages...
复制下载的cssrem目录到刚才的packges目录里。
重启Sublime Text。
一个CSS的px值转rem值的Sublime Text 3自动完成插件。
插件效果如下：
配置参数
参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem
-
px_to_rem- px转rem的单位比例，默认为40。 -
max_rem_fraction_length- px转rem的小数部分的最大长度。默认为6。 -
available_file_types- 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。
上面的文件没有.html文件，给文件类型加上一个，如下：
配置好后，再重启一下Sublime
演示如下
配置好之后，只要写上92px的大小，那么就会自动转换为rem
2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送
寻找资源的地址如下：