em rem vw vh
单位 (Units)
Many CSS properties like width, margin, padding, font-size etc. take length. CSS has a way to express length in multiple units. Length is a combination of a number and unit with no whitespace. E.g. 5px, 0.9em etc.
许多CSS属性(例如width ， margin ， padding ， font-size等)都需要长度。 CSS有一种以多个单位表示长度的方法。 长度是数字和单位的组合，没有空格。 例如5px ， 0.9em等
长度 (Length)
常用长度单位 (Common Length units)
There are several units used by CSS to express length. The older ones, supported by all browsers, are:
CSS使用几种单位来表示长度。 所有浏览器都支持的较旧版本是：
rem - “r” stands for “root”: “root em” -, which is equal to the font size fixed to the root element (almost always
<html>).rem- “ r”代表“ root”：“ root em”-，它等于固定在root元素上的字体大小(几乎总是
<html>)。vh and vw - Many responsive web design techniques rely heavily on percentage rules. However, CSS percentage measures are not always the best solution for all problems. The measure vh is equal to 1/100 of the height of the viewport. So, for example, if the height of the browser is 800px, 1vh equals 8px and, similarly, if the width of the viewport is 650px, 1vw is equivalent to 6.5px.
vh和vw-许多响应式Web设计技术严重依赖百分比规则。 但是，CSS百分比度量并非始终是解决所有问题的最佳解决方案。 尺寸vh等于视口高度的1/100。 因此，例如，如果浏览器的高度为800px，则1vh等于8px，类似地，如果视口的宽度为650px，则1vw等于6.5px。
vmin and vmax - These units are related to the maximum or minimum value of vh and vw. For example, if the browser was set to 1200px wide and the height 600px, 1vmin would be 6px and 1vmax would be 12px. However, if the width was set to 700px and the height set to 1080px, vmin would equal 7px and vmax 10.8px.
vmin和vmax-这些单位与vh和vw的最大值或最小值有关。 例如，如果将浏览器设置为1200px宽，高度设置为600px，则1vmin将为6px，1vmax将为12px。 但是，如果宽度设置为700px，高度设置为1080px，则vmin等于7px，vmax等于10.8px。
ex and ch - These units, similar to em and rem, rely on the current font and font size. However, unlike em and rem, these units also rely on
font-familyas they are determined based on measures specific to each font. The ch unit (“character unit”) is defined as the width of the character zero (“0”). The ex unit is defined as “the current x-height of the current font or the half of 1em”. The height-x of a given font is the height of the lowercase “x” of that font. It is often the middle mark of the font.ex和ch-与em和rem类似，这些单位取决于当前字体和字体大小。 但是，与em和rem不同，这些单元还依赖于
font-family因为它们是根据每种字体的特定度量确定的。 ch单位(“字符单位”)定义为字符零(“ 0”)的宽度。 ex单位定义为“当前字体的当前x高度或1em的一半”。 给定字体的height-x是该字体的小写字母“ x”的高度。 它通常是字体的中间标记。
There are two general kinds of units used for length and size in CSS: relative and absolute.
CSS中用于长度和大小的单位一般有两种：相对单位和绝对单位。
相对单位 (Relative Units)
Relative units change relative to the element’s current font-size or other settings. Some relative units are
相对单位相对于元素的当前字体大小或其他设置而变化。 一些相对单位是
em
em
the width of a capital letter M of the
font-sizeof the current element.当前元素
font-size的大写字母M的宽度。- Font sizes are inherited from parent elements. 字体大小是从父元素继承的。
Example:
例：
div {
font-size: 16px;
}
div h3 {
font-size: 2rem;
}Here the <h3> will equal 32px since the font-size of the current or parent element is 16px.
这里的<h3>等于32px因为当前元素或父元素的font-size为16px 。
rem
rem
root
em, or the width of a capital letter M of the default basefont-size.root
em或默认基本font-size的大写字母M的宽度。- Parent font sizes will have no effect. 父字体大小将无效。
Example:
例：
body {
font-size: 16px;
}
p {
font-size: 1.5rem;
}Here the <p> will equal 24px since the default base font-size is 16px.
这里的<p>等于24px因为默认的基本font-size是16px 。
%
%
- the percent size relative to a parent’s size. 相对于父母大小的百分比大小。
Example:
例：
div {
width: 400px;
}
div p {
width: 75%;
}Since the parent’s width is 400px, the width of the inner pargraph would be 300px, or 75% of 400px.
由于父级的宽度为400px ，因此内部段落的宽度为300px ，即400px 75％。
vw
vw
- view width, or 1/100th of the width of the viewport 视图宽度，或视口宽度的1/100
Example:
例：
body {
width: 100vw;
}The body fill the width of the viewport, whether that is 417px, 690px, or any width.
body填充视口的宽度，无论是417px，690px还是任何宽度。
vh
vh
- view height, or 1/100th of the height of the viewport 视图高度，或视口高度的1/100
Example:
例：
div {
height: 50vh;
}This div will fill half the height of the viewport, whether that is 1080px, 1300px, or any height.
该div将填充视口的一半高度，无论是1080px，1300px还是任何高度。
绝对单位 (Absolute Units)
Absolute units will be the same regardless of screen size or other settings. Some absolute units are
不管屏幕大小或其他设置如何，绝对单位都将相同。 一些绝对单位是
px
px
- pixel 像素点
- pixel counts are relative to the quality of the viewing device’s screen 像素数与查看设备屏幕的质量有关
in, cm, mm
in ， cm ， mm
- inch, centimeter, millimeter 英寸，厘米，毫米
- An inch is an inch on a small screen or a big screen 英寸是小屏幕或大屏幕上的英寸
pt, pc
pt ， pc
- points (1/72 of an inch) and picas (12 points) 点(1/72英寸)和12点(12点)
Example
例
p {
font-size: 24px;
}
div {
width: 3in;
border-width: 3pt;
}A paragraph with font-size: 24px will show up as 24px on a phone, tablet, or desktop screen.
font-size: 24px段落将在手机，平板电脑或台式机屏幕上显示为24px。
The div will show up as 3 inches wide, and the border on the div will be 3/72 of an inch thick, regardless of the screen size.
div将显示为3英寸宽，并且div的border将为3/72英寸厚，与屏幕大小无关。
em rem vw vh
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
