认识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。 也就是 实际尺寸 = 20px10em = 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券