认识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、大数据视频,价值数万资源大放送
寻找资源的地址如下: