常用单位

在CSS中可以用很多不同的方式来设定字体的尺寸。一般来说，这些单位被分成两大类：绝对单位(absolute)和相对单位(relative)。

  • 绝对单位在大多数情况下是相对于某些实际量度而言的固定值，即是说它们一旦设定，就不会因为其他元素的字体尺寸变化而变化。
  • 相对单位没有一个固定的度量值，而是由父元素尺寸来决定的相对值，它们的尺寸会根据与其相关的元素改变而改变。

下面是对这些单位的一个简单整理:

单位 类型 描述
px Absolute 1个Viewport像素
pt Absolute 1pt = 1/72英寸
pc Absolute 1pc = 12pt
% Relative 相对于父元素的字体尺寸
em Relative 相对于父元素的字体尺寸
rem Relative (即root em) 相对于html标签的字体尺寸
keyword Relative xx-small, x-small, small, medium, large, x-large, xx-large
vw Relative 相当于Viewport宽度的1/100
vh Relative 相当于Viewport高度的1/100
vmin Relative 相当于Viewport高宽中长度相对较小的1/100
vmax Relative 相当于Viewport高宽中长度相对较大的1/100

这里主要关注这几个单位：px、pt、%、em、rem和vw。

它们之间有什么区别？

从概念上很难理解这些单位之间的差别，所以下面用一些实例来说明。

例1. 默认设定

当你不设定字体尺寸时，HTML会提供一个默认的尺寸设定。大多数浏览器中<html>和<body>标签中的默认字体尺寸是100%，没有概念？看这个等式：

100% = 1em = 1rem = 16px = 12pt

还是不懂？那就换个说法，比如说你给一个<p>设置字体尺寸为100%，给另一个<p>设置为16px，在屏幕上看到的这两个<p>中的字体大小是一样的，下图列出了用几个不同单位设置的字体尺寸，可以看出是一样大的：

改变<html>的字体尺寸可以很明显的看出绝对单位和相对单位的差别。如果把<html>设置为html { font-size: 200% }，就会影响所有使用相对单位的<p>。效果如下图：

这就是相对单位最主要的优势了，借助相对单位的这种特性就可以设计出真正的响应式页面，而所要做的只是修改<html>的字体尺寸.

例3. rem与em(或者%)

em(或者%)需要通过父元素的字体尺寸来计算尺寸：

html {

  font-size: 100% /* =16px */

}

body {

  font-size: 2em; /* =32px */

}

p {

  font-size: 1em; /* =32px */

  /* font-size: 0.5em; =16px */

}

因为<p>是<body>的子元素，而<body>是<html>的子元素，所以<p>中的em和%将是之前的两倍。

当你为一个元素添加em单位时，应当考虑到所有父元素的字体尺寸。如你所见，这样很容易使人混乱。
使用rem可以很好的解决这个问题。rem只需要计算<html>的字体尺寸而不需要考虑父元素。如下代码所示：

html {

  font-size: 100% /* =16px */

}

body {

  font-size: 2rem; /* =32px */

}

p {

  font-size: 1rem; /* =16px */

}

使用rem可以让你拥有和em/%同样的缩放能力，但不必去考虑那些复杂的嵌套关系。

例4. Viewport宽度

vw是CSS3中新提出的一个单位，通过Viewport宽度来计算字体尺寸。这样就可以设计出更加灵活的响应式字体。
虽然这个单位看上去非常适合用于响应式设计，但就我个人而言不是很热衷于它。在使用vw的过程中我并不能很好的控制字体的大小，不是太大就是太小。

我的方式

当我在写这篇文章时，我仅使用px来作为单位。因为现在大多数浏览器都允许用户放大页面，这样做就不会有可访问性的问题。
然而，我发现了这个具有一定限制力的方式。虽然我的字体尺寸在中小型屏幕上看起来还行，但在大屏幕上会被优化的更好。尽管用户可以自行设定放大的属性，但是我们希望可以尽量减少用户的工作。
我的解决方案是使用rem，并使用px作为备用单位。

html {

  font-size: 62.5%; /* sets the base font to 10px for easier math */

}

body {

  font-size: 16px;

  font-size: 1.6rem;

  /* sets the default sizing to make sure nothing is actually 10px */

}

h1 {

  font-size: 32px;

  font-size: 3.2rem;

}

像下面这样写就可以允许我按比例来放大我的字体尺寸：

@media screen and (min-width: 1280px) {

  html {

    font-size: 100%;

  }

}

这个方案之所以使用px作为备用单位，是因为rem不支持IE8及其以下版本。这个方案有一个问题，就是像上面这样改变基础字体尺寸时，并不能对备用字体尺寸起到作用。不过，我不觉得这个问题多么大，因为这个匹配大型设备尺寸的能力只不过是为了锦上添花而已，并不是一个核心功能。

总结

常用的字体设置也就那么几种，我常用的：px,%,em,rem。

关于CSS中的字体尺寸设置 em rem的更多相关文章

  1. 关于CSS中的字体尺寸设置 em rem等

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  2. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  3. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  4. css中添加屏幕自适应方法（rem）

    css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...

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

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

  6. CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...

  7. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

  8. CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

  9. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

随机推荐

  1. Windows 2000 栈溢出 利用异常

    当在一个函数(test)里面自定义了异常处理,如下: 那么在运行时,它会把自定义的异常处理函数MyExceptionhandler()的地址放入栈中(PUSH 004013CC) 然后把fs:[0]的 ...

  2. JavaScript（第十一天 9.24）

    Html(决定页面显示的数据)+CSS(决定页面的布局)+JS(和用户或者服务器交互.决定页面的行为) JS前端的编程语言,脚本语言,简单易学,基础是HTML+CSS 编译工具使用:vscode  s ...

  3. stl 题目总结

    stl 题目总结 一.圆桌问题 1 .问题: 圆桌上围坐着2n个人.其中n个人是好人,另外n个人是坏人.如果从第一个人开始数数,数到第m个人,则立即处死该人:然后从被处死的人之后开始数数,再将数到的第 ...

  4. Arduino --structure

    The elements of Arduino (C++) code. Sketch loop() setup() Control Structure break continue do...whil ...

  5. 下页小希学MVC5+EF6.2 学习记录二

    目的:1 学习mvc+ef 2  写下日记也是对自己的督促 从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛 ...

  6. poj_2406 KMP寻找重复子串问题

    B - Power Strings Time Limit:3000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u S ...

  7. PrepareStatement对象进行批处理的典型步骤顺序

    https://www.yiibai.com/jdbc/preparestatement-batching-example.html 以下是使用PrepareStatement对象进行批处理的典型步骤 ...

  8. 洛谷-P2634 [国家集训队]聪聪可可 点分治

    Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好 ...

  9. （5）opencv的基础操作和矩阵的掩模操作

    不懂的,可以简单,看看这个网址:https://blog.csdn.net/xiongwen_li/article/details/78503491 图片放到了桌面,所以,图片的路径就是桌面了,剩余的 ...

  10. 用matplotlib统计数据并画图

    用jupyter来统计数据,画出柱状图 import numpy as np import pandas as pd import matplotlib.pyplot as plt import ma ...