一、px
物理像素
- pc端页面1px等于1个
物理像素
- 移动端不尽相同,所以有
物理像素比
或屏幕像素比
,也就是1px能显示多少个物理像素比
二、em
是一个相对单位
- 子元素字体大小的
em
是相对于父元素字体大小 - 元素的
width
、height
、padding
、margin
用em
的话是相对于该元素的font-size
<style>
.parent {
font-size: 40px;
/* 元素的 `width` 是相对于该元素的 `font-size`, 所以换算为:40 * 10 = 400px */
width: 10em;
/* 元素的 `height` 是相对于该元素的 `font-size`, 所以换算为:40 * 10 = 400px */
height: 10em;
background-color: red;
}
.parent .children {
/* 子元素字体大小的 `em` 是相对于父元素字体大小, 所以换算为:40 * 0.5 = 20px */
font-size: 0.5em;
/* 元素的 `width` 是相对于该元素的 `font-size`, 所以换算为:20 * 10 = 200px */
width: 10em;
/* 元素的 `height` 是相对于该元素的 `font-size`, 所以换算为:20 * 10 = 200px */
height: 10em;
background-color: blue;
}
</style>
<div class="parent">
我是父元素
<div class="children">我是子元素</div>
</div>
三、rem
是一个相对单位, 是 root em
的简写, rem
的基准相对于 html
元素的字体大小,也就是页面的根元素,所以称之为 root rem
,
<style>
html {
font-size: 50px;
line-height: 1;
}
.parent {
/* `rem` 是相对于根元素,换算为:50 * 0.5 = 25px */
font-size: 0.5rem;
/* `rem` 是相对于根元素,换算为:50 * 10 = 500px */
width: 10rem;
/* `rem` 是相对于根元素,换算为:50 * 10 = 500px */
height: 10rem;
background-color: red;
}
.parent .children {
/* `rem` 是相对于根元素,换算为:50 * 0.5 = 25px */
font-size: 0.5rem;
/* `rem` 是相对于根元素,换算为:50 * 10 = 500px */
width: 10rem;
/* `rem` 是相对于根元素,换算为:50 * 10 = 500px */
height: 10rem;
background-color: blue;
}
</style>
<div class="parent">
我是父元素
<div class="children">我是子元素</div>
</div>
四、vw、vh
是一个相对单位
- vw:
viewport width
视口宽度单位 - vh:
viewport height
视口高度单位
相对视口的尺寸计算结果
- 1vw = 1 / 100 视口宽度
- 1vh = 1 / 100 视口高度
与百分比的区别
- 百分比是相对于父元素来说的
- 而vw和vh总是针对与当前视口来说的
五、rpx
是微信小程序推出的一种新的单位