认识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