• px (像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。
  • ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。
  • rems: 这个单位的效果和 ems 差不多，除了 1rem 等于 HTML 中的根元素的字体大小， (i.e. <html>) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， rems 不支持 Internet Explorer 8 和以下的版本。

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——<html>开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 <h1> 元素有一个 2ems 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 <article> 元素在你的页面上，然后设置它的 font-size 为 1.5ems (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

你需要将 em 的值设置为 20/24, 或者 0.83333333ems. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rems 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。

原文地址：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals

CSS——字体大小最常用的单位的更多相关文章

  1. python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置

    python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...

  2. css字体大小单位

    1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...

  3. （转）CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  4. CSS字体大小之em,px,百分比

    首先要记住网页中常规字体的大小为16px. px是用来设置字体的绝对大小.通常为用于物理值的设置.我们在互联网上看到的常规字体大小为16px.而em是指相对于父元素的大小.1em是父元素的1倍,2em ...

  5. CSS字体大小: em与px、pt、百分比之间的对比

      CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...

  6. CSS字体大小设置时的参考（转）

    from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...

  7. css字体大小设置em与rem的区别

    em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如  如果我在box_text的父元素box加了一个字体大小   那么body的8px就会被box_text的父元 ...

  8. Chrome浏览器下CSS字体大小设置小于12px无效问题

    当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body {     -webkit-text-size-adjus ...

  9. 在移动端如何选择字体大小和布局的单位,px或dp?

    android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px.这些单位如何换算,是设计师.开发者需要了解的关键. 简单理解的话,px(像素)是我们UI设计师在PS ...

随机推荐

  1. 又做了个新的Blog

    http://inkhin.com 服务器比较渣,访问不了的请见谅.

  2. windows 3种方式运行exe文件

    1.双击文件运行 2.打开cmd,cd 到要运行的文件目录下,输入文件名或者文件名.exe 3.将文件目录配置到系统环境变量,按windws+R输入文件名或者文件名.exe

  3. Apache——开启个人用户主页功能

    个人主页功能分为不加密和加密两种 不加密: 先来建立几个用户,我这是建了两个 例:命令为:useradd  qiyuan 然后输入:passwd qiyuan,改一下密码 我们看一下家目录下面: 已经 ...

  4. MySQL_数据库命令

    Mysql基础命令 开启MySQL服务:net start mysql 关闭MySQL服务:net stop musql 进入mysql:mysql -h localhost -u root -p 1 ...

  5. sshpass和做软链接

    参考: https://help.aliyun.com/document_detail/54530.html?spm=5176.11065259.1996646101.searchclickresul ...

  6. ucloud-monitor

    创建报警模板: 可以从现有模板导入: 设定指标: #通知人管理,可以设置报警短信通知人: #给主机绑定告警模板: 勾选要绑定的主机 点设置: #选择要添加的告警模板

  7. provider: Shared Memory Provider, error: 0 - No process is on the other end of the pipe.

    通常情况下,要解决这个,你去SQL Server配置管理器(SSCM)和: [1]在SSCM中设置 [1.1]确保共享内存协议启用 [1.2]确保命名管道协议 [1.3]确保TCP / IP被启用,和 ...

  8. web／服务器知识

    一 PV 推到出 QPS 你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算呢?? PV是什么:PV是page view的简写.PV是 ...

  9. navicat 使用 pymysql模块

    新健库 ,新增字段+类型+约束 设计表:外键(自增) 新建查询 建立表模型 /* 数据导入: Navicat Premium Data Transfer Source Server : localho ...

  10. linux的安装和配置

    转载:https://www.cnblogs.com/hhaahh/p/10404093.html 1.VMware简介 此软件是一个虚拟的pc机软件,可以在现有操作系统中虚拟出一个新的硬件环境,以此 ...