关于CSS中的字体尺寸设置 em rem
常用单位
在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的更多相关文章
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- css中的字体样式及元素样式
css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...
- css中添加屏幕自适应方法（rem）
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- css字体大小设置em与rem的区别
em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如 如果我在box_text的父元素box加了一个字体大小 那么body的8px就会被box_text的父元 ...
- CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- 关于CSS中的单位px、em、rem
首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...
随机推荐
- 小程序分享H5页面
1.在要分享的按钮上写一个跳转 <navigator url="../invite1/invite1"> <button class="invite_b ...
- P 1030 完美数列
转跳点:
- 2016蓝桥杯决赛C/C++A组第四题 路径之谜
题意: 小明冒充X星球的骑士,进入了一个奇怪的城堡.城堡里边什么都没有,只有方形石头铺成的地面. 假设城堡地面是 n x n 个方格.[如图1.png]所示. 按习俗,骑士要从西北角走到东南角.可以横 ...
- php语言注意点
PHP大小写问题 http://www.jb51.net/article/38579.htm 推荐大家始终坚持“大小写敏感”,遵循统一的代码规范.1. 变量名区分大小写 2. 函数名.方法名.类名不区 ...
- 吴裕雄--天生自然C++语言学习笔记：C++ 存储类
存储类定义 C++ 程序中变量/函数的范围(可见性)和生命周期.这些说明符放置在它们所修饰的类型之前.下面列出 C++ 程序中可用的存储类: auto register static extern m ...
- Sequence Models Week 1 Building a recurrent neural network - step by step
Building your Recurrent Neural Network - Step by Step Welcome to Course 5's first assignment! In thi ...
- Tensorflow学习教程------简单练一波，线性模型
#coding:utf-8 import tensorflow as tf import numpy as np #使用numpy 生成100个随机点 x_data = np.random.rand( ...
- 18 12 28 css 浮动 定位
浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...
- Maven:Eclipse导入从SVN上检出的Maven多模块工程
大致步骤: 1.从SVN中检出多模块项目,名称随意(Eclipse中可以在[Window ==>>Show View==>>Other==>>SVN==>&g ...
- React编写组件的局部样式
我们都知道,在Vue的单文件组件中,style标签中编写的样式默认为全局样式,如果我们想编写局部样式, 使用一个scoped关键字就可以. 那么在React中怎么实现呢? (注: 这种方法必须使用类选 ...