尺寸单位
作者: dkvirus 发表于: 2018-07-20 09:23:36 最近更新: 2018-08-01 22:05:57

一、绝对单位

1. px

像素,屏幕由一个个像素组成,我的电脑屏幕分辨率为 19201020,表示水平方向有 1920 个像素,垂直方向有 1020 个像素,构成的像素总个数为 1920 1020 个,所以屏幕看起来还是很清晰滴。

2. 其它绝对单位

用的不多,记录一下保证看到的时候能认识。

尺寸单位 说明
pt
pc 派卡
in 英寸(1英寸(in)=2.54厘米(cm))
mm 毫米
cm 厘米
q 1/4 毫米

换算关系:1in(1英寸) = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

二、相对单位

1. em

相对于父级元素的 font-size 设置尺寸。如下示例:span 的 font-size = 10px * 1.6 = 16px。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
div {
font-size: 10px;
}
span {
font-size: 1.6em;
}
</style>

<div>
<span>hello world!</span>
</div>

2. rem

ie9+,相对于根元素 html 的 font-size 设置尺寸的。如下示例:span 的 font-size = 20px * 1.6 = 32px。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html lang="en">
<head>
<style>
html {
font-size: 20px;
}
div {
font-size: 10px;
}
span {
font-size: 1.6rem;
}
</style>
</head>
<body>
<div>
<span>hello world!</span>
</div>
</body>
</html>

3. 百分比 %

相对于父级元素的宽高百分比。

4. vh、vw (ie10+)

vh 相对于页面高的百分数,height: 100vh; 设置高度为页面高的百分之百;
vw 相对于页面宽的百分数,width: 50vw; 设置宽度为页面宽的百分之五十。

5. vmin、vmax (ie10+)

vmin 获取页面宽高中较小的那个值,width: 50vmin 设置宽度为页面宽高较小那个值的百分之五十;
vmax 获取页面宽高中较大的那个值。

电脑屏幕一般宽度大于高度,手机竖屏一般宽度小于高度。

三、计算单位

单位还可以计算的噢:width: calc(100vw - 500px);

首页
友链
归档
dkvirus
动态
RSS