CSS单位em和rem

写过样式的都知道CSS是有单位的,想要写出还原设计稿的完美样式,离不开好的单位。现在CSS的单位有%、in、cm、mm、em、ex、pt、pc、px等原生单位,现在更有了rem、vh、vw、vmin、vmax等单位。

一般开发用px比较多,现在开发移动端rem用的也比较多,在这边就不讨论vh和vw与rem的比较。今天只说说em和rem具体的显示单位。

应该很多都知道rem是根据HTML元素设置的字体大小来定义单位,em是根据父元素设置的字体大小来设置,但是很多没有真的搞清楚这两个单位对应px单位到底是怎么对应的。

html{
    font-size: 20px;
}
<div style="width: 5rem;height: 5rem;background: red;">
    <p style="font-size: 1rem">这是em单位<p>
</div>

当我们设置HTML字体大小为20px的时候,相当于1rem=20px,此时div的宽高就是100px,字体大小就是20px,当我们改变HTML字体大小的时候,div和字体大小也会跟着变。可以自己写一下这样的代码,很容易就知道rem是怎么换算的。

根据这个特性,我们就可以动态的设置HTML的字体大小,来自适应不同手机分辨率,当然,最好我们设置成能整十整百的计算,好比1rem=100px,而不是1rem=75px,这样方便写样式的时候计算。如果你觉得采用vs或者是sublime能有插件帮忙换算,那就当我没说。当然,现在的很多标注软件比如蓝湖和PXCooke也能帮你计算。

PC端最好不要使用rem,因为像Chrome最小字体单位是12px,可是默认大小是16px,不同浏览器会有不同的默认单位或者是最小字体单位,所以PC最好不要使用rem单位。

Em就相对复杂一点,em单位的解释是根据父元素。当我们没有设置字体大小的时候

<p style="font-size: 1em">这是em单位<p>

默认的是浏览器默认字体大小,Chrome是16px。

当我们设置字体大小

<div style="width: 500px;height: 500px;background: red;font-size: 30px">
    <p style="font-size: 1em">这是em单位<p>
</div>

这时候字体就是30px。而且,当我们设置了div字体大小的时候,宽高使用em单位

<div style="width: 5em;height: 5em;background: red;font-size: 30px">
    <p style="font-size: 1em">这是em单位<p>
</div>

这时候div宽高分别是150px。

当我们再嵌套一个div的时候

<div style="width: 5em;height: 5em;background: red;font-size: 30px">
    <div style="font-size: 20px;width: 3em;height: 3em;background: blue;">
        <p style="font-size: 1em">这是em单位<p>
    </div>
</div>

这时候p的字体大小就是20px,而且给这个div加宽高,也会根据20px来换算。

Em单位是优先根据自身的字体大小,如果没有就向上寻找最近父元素有设置字体大小来换算的。其实只要写一写上面的代码然后看一看浏览器显示的大小就很容易知道em和rem是根据上面来换算。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-01

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 九宫格抽奖

    wade
  • ES6之proxy

    Proxy 这个东西,在开发的时候解决跨域使用过,翻译成代理器。Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(met...

    wade
  • Css样式书写顺序

    我不知道是否有人严格按照一定的顺序来书写css的样式,可以说几乎都是需要什么样式就加什么样式,完全没有考虑过样式属性书写的顺序对性能有什么影响。

    wade
  • 前端:CSS字体大小 px、em、rem的区别

    1px的长度表示显示器中一个像素(pixel)的长度,实际显示的效果和显示器的 DPI(Dot Per Inch,每英寸像素数)有关,DPI越大每英寸的像素数越...

    渔父歌
  • table锁定列的一个方法.及琢磨思路

    这是从http://stackoverflow.com找到一个一链接,删除多余的css,加上色就是上图。

    申君健
  • 圣杯布局与双飞翼布局

    上一篇文章介绍了三种方法实现CSS三栏布局,本文则在此基础上,进一步介绍常用的圣杯布局与双飞翼布局。

    前端林子
  • 用23行代码爬取豆瓣音乐top250

    豆瓣对于爬虫十分友好,而且豆瓣上面又有各种电影图书音乐等资源,是我们学习爬虫一个很不错的锻炼目标。基本上每个学习爬虫的人都会拿豆瓣来练练手。 网上有各种爬取豆瓣...

    爱吃西瓜的番茄酱
  • 网页结构与表现原则

    网页的结构与表现原则总的来说为: 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度(精简页面结构) 我们可以通过一个微博用户发言信息列...

    就只是小茗
  • 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

    书童小二
  • 自学前端第三天

    小小咸鱼YwY

扫码关注云+社区

领取腾讯云代金券