一、那到底什么是 rem 呢?

规范中明确写道:

Equal to the computed value of ‘font-size’ on the root element.

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?请出 Caniuse 看看吧

太好了,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

可是,W3C 那些家伙为什么要闲着下面疼的新增这样一个单位呢?它和 em 有啥区别呢?

我们知道 em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:

html{

font-size:62.5%;

}

body{

font-size:12px;

font-size:1.2rem ;

}

p{

font-size:14px;

font-size:1.4rem;

}

需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。

二、为啥要用 rem 呢?

黑夜给了我黑色的眼睛,我将用它寻找关怀。

浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做,作为一个具有「人文关怀」的前端,我们完全可以考虑这些情况。由其是在引入了 CSS预处理工具之后,这几乎不会增加什么成本。

也再次印证前面提到的:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。

各个浏览器的设置方法如下:

  1. IE浏览器:按下 Alt 键,打开菜单栏→查看→字体大小
  • Chrome 浏览器:设置→显示高级设置→网页内容
  • Firefox 浏览器:按下 Alt 键,打开菜单栏→工具→选项→内容选项卡
  • 其他浏览器就不一一举例了……

三、什么时候用 rem?

既然 rem 的可用性更好,是不是在所有地方都去使用呢?别捉急,通常在标题,正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景,rem 可能会导致布局错位,比如这样一个回顶部的按钮:

使用 rem 设置文字大小的更多相关文章

  1. 用rem设置文字大小

    一.px与em 用px设置文字大小是再正常不过的事情,比如 html {font-size: 12px;} 随处可见的在设置width.height使用px,这也是细致稳妥的设置方法,这样做的缺点在于 ...

  2. 响应式十日谈第一日:使用 rem 设置文字大小

    上面回顾: 在序言中我们已经提到了响应式的一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时 ...

  3. 【转】CSS3的REM设置字体大小

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

  4. CSS3的REM设置字体大小

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

  5. Android中设置文字大小的定义类型

    在Android中所有的组件可以设置大小,但是在设置大小的时候需要指定其单位,这些单位如下: px(pixels):像素: dip(device independent pixels):依赖于设备的像 ...

  6. QLabel设置文字大小和颜色

    https://blog.csdn.net/fm0517/article/details/4805462 ui.label是QLabel ui.label_4->setText("so ...

  7. Eclipse设置文字大小

    1,选择窗口,preference 2,general

  8. UIButton修改文字大小问题

    一.问题描述 通过UIButton对象font属性设置文字大小,却发现该属性在2.0.3.0就已经被废弃,ios不建议使用. 图1-1:点出UIButton对象的font属性提示被废弃 图1-2:UI ...

  9. iOS UIAlertView 文字对其方式 文字大小 设置方法

    - (void) willPresentAlertView:(UIAlertView *)alertView { for (UIView *subViewin alertView.subviews) ...

随机推荐

  1. HTML布局排版手机上浏览的网页

    前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...

  2. springboot maven 收发JSON

    先在pom.xml添加 json 库 <dependency> <groupId>com.alibaba</groupId> <artifactId>f ...

  3. 【转载】我为什么放弃了 Linux 内核学习?

    最近学习内核很是心累,碰巧看到这篇文章,有点意思~ 转自http://happypeter.github.io/index.html,以下为原文内容: 我在国内的技术类网站 / 博客上, 时常会看到分 ...

  4. GitToc-为你的Github仓库的Readme自动生成一个目录

    维护自己的Github仓库的时候发现Github的Readme不支持Toc目录,所以就自己写了一个小工具. 工具地址:https://github.com/Holy-Shine/GitToc 简介 如 ...

  5. BOOT目录磁盘占用满处理

    背景:Ubuntu:16.04 查看已安装启动镜像 dpkg --get-selections |grep linux-image 这里会列出目前已经安装的启动镜像,一般分两种,一种状态为“insta ...

  6. samtools获取uniq reads

    参考地址: https://www.biostars.org/p/56246/ -q INT only include reads with mapping quality >= INT [0] ...

  7. 自己实现CountDownLatch

    自己实现的CountDownLatch ,只是模拟他的功能而已.jdk中的实现采用的是AQS public class MyCountDownLatch { private final int tot ...

  8. [转帖]Linux下逻辑地址、线性地址、物理地址详细总结

    Linux下逻辑地址.线性地址.物理地址详细总结 https://www.cnblogs.com/alantu2018/p/9002441.html 总结的挺好的 现在应该是段页式管理 使用MMU和T ...

  9. 解决idea tomcat乱码问题

    解决idea Server Output.TomcatLocalhost Log.Tomcat Catalina Log控制台乱码问题 问题原因:编码不一致,tomcat启动后默认编码UTF-8,而w ...

  10. MATLAB 单元数组 cell 和结构体 struct 的用法以及区别

    1. 前言 Matlab单元数组cell和结构体struct都可以将不同类型的相关数据集成到一个单一的变量中,使得大量的相关数据的处理变得非常简单而且方便.但是,需要注意的是,单元数组和结构体只是承载 ...