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. diff详解,读懂diff结果-转载

    阅读目录 1.概述 2.diff如何工作,如何理解diff的执行结果 3.Normal模式 4.Context模式 5.Unified模式 6.比较目录 7.一些有用的参数 回到顶部 1.概述 本文将 ...

  2. 使用CMake在Linux下编译tinyxml静态库

    环境:CentOS6.6+tinyxml_2_6_21.下载并解压tinyxml_2_6_2.zip unzip tinyxml_2_6_2.zip 2.在tinyxml文件夹里创建一个CMakeLi ...

  3. Codeforces 919D - Substring

    919D - Substring 思路: 拓扑排序判环+DAG上dp+记忆化搜索 状态:dp[i][j]表示以i为起点的路径中j的最大出现次数 初始状态:dp[i][j]=1(i have no so ...

  4. es5,es6,typescript，nodejs

    es5新特性 讲到js必讲的几个概念,作用域,闭包,IIFE自执行函数 es5主要是对Object,Array,Function做了扩展,还有josn工具 es6新特性 增加了新的数据类型 WeakM ...

  5. import 与 import static

    原文链接:https://www.geeksforgeeks.org/static-import-java/ java中的静态引用 直接解释 一般引入类的方式:import java.lang.Mat ...

  6. English trip -- Review Unit1 Personal Information 个人信息

    1.重点内容进行自我介绍 What's you name? I'm Loki Where are you from? I'm Local, I'm Chengdu How old are you? t ...

  7. English trip -- VC(情景课)5 D

    Read 阅读 Listen and read. 听并读 Notice from Riverside Library Come and visit Riverside Library.The new ...

  8. codeforces 700a//As Fast As Possible// Codeforces Round #364(Div. 1)

    题意:n个人要运动ll长,有个bus带其中几个人,问最短时间 最后所有人在同一时间到终点是用时最少的.由于搭bus相当于加速,每个人的加速时间应该一样.先计算bus走过的路程route.看第一个人被搭 ...

  9. codeforces 555c// Case of Chocolate// Codeforces Round #310(Div. 1)

    题意:直角边为n的网格巧克力,一格为一块,选择斜边上一点,从左或上吃,直到吃到空气,称为一次操作.给出几个操作,问各能吃几块.如果x是当前要吃的横坐标,在已经吃过的中找x1>=x的第一个x1,即 ...

  10. 『Scrapy』爬虫框架入门

    框架结构 引擎:处于中央位置协调工作的模块 spiders:生成需求url直接处理响应的单元 调度器:生成url队列(包括去重等) 下载器:直接和互联网打交道的单元 管道:持久化存储的单元 框架安装 ...