CSS长度单位px % vh vw vmin vmax rem em ex ch对比
随着web的发展，网页需求的增加，网页设计师对网页设计的要求越来越高，迎来了html5与css3的出现，那么css3中有哪些长度计量单位呢，常见的有px % vh vw vmin vmax rem em ex ch，那么他们有什么不同呢，今天我们来分析一下：
一、px和%及pt
像素与百分比是我们最熟悉的一种css计量单位，px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
pt全称为point，但中文不叫“点”，它大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。
百分比%是相对于父元素的计量单位，三者的示例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
h1 {
margin: 10px 0;
font-size: 16px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-top: 8px;
background: #ccc;
}
.in {
width: 1in;
}
.pt {
width: 72pt;
}
.pc {
width: 6pc;
}
.px {
width: 96px;
}
.cm {
width: 2.54cm;
}
.mm {
width: 25.4mm;
}
</style>
</head>
<body>
<h1>单位转换对比：</h1>
<ul>
<li class="in">1in</li>
<li class="pt">72pt</li>
<li class="pc">6pc</li>
<li class="px">96px</li>
<li class="cm">2.54cm</li>
<li class="mm">25.4mm</li>
</ul>
<p>
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
</p>
</body>
</html>二、em和rem
em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
body {
font-size: 14px;
}
h1 {
font-size: 16px;
}
.size1 p {
font-size: 1em;
}
.size2 p {
font-size: 2em;
}
.size3 p {
font-size: 3em;
}
</style>
</head>
<body>
<h1>假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：</h1>
<ul>
<li class="size1">
<strong>1em</strong>:
<p>
1em大小的文字
</p>
</li>
<li class="size2">
<strong>2em</strong>:
<p>
2em大小的文字
</p>
</li>
<li class="size3">
<strong>3em</strong>:
<p>
3em大小的文字
</p>
</li>
</ul>
</body>
</html>rem
em单位被定义为当前字体大小。例如，如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。<body>
<div class="test">
Test
</div>
</body>
<style>
body {
font-size: 14px;
}
div {
font-size: 1.2em;
// 计算后的实际大小为 14px * 1.2= 16.8px
}
</style><style>
body {
font-size: 14px;
}
div {
font-size: 1.2em;
}
</style>
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
<style>
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
</style>
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
对网格布局的好处
rem不是只对定义字体大小有用。比如，你可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上,然后在特定的地方使用em比例缩放。这将带给你更加可预测的字体大小和比例缩放。三、vh和vw
响应式网页设计技术很大程度上依赖于比例规则。然而，CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样？这正是vh和vw单位所提供的。.slide {
height: 100vh;
}四、vmin 和 vmax
.box {
height: 100vmin;
width: 100vmin;
}.box {
height: 100vmax;
width: 100vmax;
}vmax这些规则的组合提供了一个非常灵活的方式，用新的、令人兴奋的方式利用你的可视窗口的大小。
五、ex 和 ch
ch
被定义为0字符的宽度
ch单位，基本的概念是，给定一个等宽字体的字体，一个N个字符单位宽的盒子，比如width：40ch;,可以一直容纳一个有40个0字符的长度。示例代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
h1 {
margin: 10px 0;
font-size: 16px;
}
div {
overflow: hidden;
width: 10ch;
background: #ccc;
}
</style>
</head>
<body>
<h1>定义一个宽度正好能装下10个0的容器：</h1>
<div>
0000000000
</div>
</body>
</html>ex单位被定义为"当前字体的x-height或者一个em的一半"。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。x-height:小写字母x的高度
对于这种单位有很多的用途，大多数是用于排版的微调。例如，sup元素,代表上标，可以用相对定位和一个1ex的底部值在行内被推高。类似地，你可以拉低一个下标元素。浏览器默认支持这些利用上标和下标特性的vertical-align规则，但是如果你想要更精细的控制，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
</style>
</head>
<body>
上标<sup>€</sup> 下标<sub>‰</sub>
</body>
</html>
{{collectdata}}
网友评论0