Rem为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px，那 1rem 就为 20px。

“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的需求。

你可能会给 html/body 元素定义一个字体大小，来作为整个页面的参考值，我们后面称它为 base 好了。

老板说：这部分是正文，字体要大一些，行间距也大一些，看着明显。你就可以给 article 元素设置 1.4 倍的字体大小(1.4em)，这时候，正文里的标题 h2 可以设置成 2em，这时候它的字号已经是 base 的 2.8 (1.4*2) 倍了。

然后设计师跑过来说：图片下面的注解字体太大了，跟正文无法区分。你想把它设置成和 base 一样大，是 0.714em (1/1.4) 吗？NO，是 1rem。

因为 em 是相对于父元素的倍数，所以你可能在许多层嵌套的 em 中找不到一个固定值，rem 就是可以随时拿来用的一个固定参考值。

———————————

为什么建议网页的全部 *文本* 都用 em/rem 来设置大小呢？

有了这个 base 变量，就可以只修改一个值，来改变所有文字的大小了。因为它们都是 base 的倍数。
就像浏览器提供的页面缩放功能那样，不过这里是只缩放文本。

再结合 media query，就可以控制不同屏幕上有不同的字号了(14px 在某些设备上有点小吧) 。

大家也可以参考下图：

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/define-font-size-with-css3-rem © w3cplus.com、https://www.zhihu.com/question/21504656/answer/48452762

rem & em初探的更多相关文章

  1. 自适应布局，响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  2. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  3. webview的弹性布局之rem,em

    webview页面的自适应一般有两种方法,即一是JS的计算方法,二是通过css的media设置分档方式.在此主要介绍css的方式. html { font-size: 16px; } @media o ...

  4. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  5. rem,em

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择 ...

  6. px,rem,em的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. 移动端布局rem em

    1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...

  8. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...

  9. 日常博客----rem,em的恩怨相杀

    基本知识: 使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小. 我们可以使用这种灵活性,使我们在开发期间,能更加快速灵活的调整,允许浏览器用户调整浏览器大 ...

随机推荐

  1. 关于express项目的创建与启动

    没有经常用,所以经常搞错, 创建express项目,需要新建一个文件夹名,这个文件名就是用来承载express的内容的, 好了.打开终端,cd至创建的文件夹之下. 也可以直接这样,如以下,admin为 ...

  2. 【Robot Framework 项目实战 02】SeleniumLibrary Web UI 自动化

    前言 SeleniumLibrary 是针对 Robot Framework 开发的 Selenium 库.它也 Robot Framework 下面最流程的库之一.主要用于编写 Web UI 自动化 ...

  3. Idea设置默认不折叠一行的函数

  4. nodejs 监听文件夹变化的模块

    使用Node.JS监听文件夹变化 fs.watch 其中Node.JS的文件系统也可侦听某个目录的改变, 如fs.watch   其中fs.watch的最大缺点就是不支持子文件夹的侦听,并且在很多情况 ...

  5. How to implement connection pool in spark streaming

    在spark streaming的文档里,有这么一段: def sendPartition(iter): # ConnectionPool is a static, lazily initialize ...

  6. Confluence 6 选项 1 – 在 Confluence 中手动重建用户和用户组

    当你只有少量的用户和用户组的时候,使用这个方法. 使用 Confluence 的系统管理员登录 Confluence. 进入用户目录管理界面,然后移动 内部目录(internal directory) ...

  7. synchronized同步代码块锁释放

    今天发现自己写的线上程序出现数据库不能同步的问题,查看日志已经停止记录,随后使用jstack查看线程的运行状况,发现有个同步线程锁住了. 以下是jstack -l 637  问题线程的内容. &quo ...

  8. 模拟模拟vij1120

    花生采摘 描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!——熊字”. 鲁宾逊先生和多多都很开心,因为花生正 ...

  9. juqery的一些简单用法

    层级选择器(重点).基本过滤选择器 :eq(index) 选择匹配到的元素中索引号为index的一个元素,index从0开始 :odd 选择匹配到的元素中索引号为奇数的所有元素,index从0开始 : ...

  10. JavaScript 对象的使用

    JavaScript支持面向对象的编程方法. 2.9.1 window对象(窗口对象)的常用方法 内部函数 alert ( ) ,实际上是 window 对象的方法,写成全称为 window . al ...