单位 | 特性 | 注意事项 |
---|---|---|
em | 相对于父元素的字体大小 | 与rem相比,em的值会随着父元素字体大小的变化而变化,这可能导致嵌套元素的大小难以预测。 |
rem | 相对于根元素(通常是html元素)的字体大小 | 与em相比,rem的值不会受到父元素字体大小的影响,这使得它更容易控制和预测。 |
vw | 相对于视口宽度的1% | 与vh相比,vw是基于视口的宽度,而vh是基于视口的高度。它们都是相对于视口的比例,而不是相对于任何特定的字体大小或元素大小。 |
vh | 相对于视口高度的1% | 与vw相比,vh是基于视口的高度。它们都是相对于视口的比例,而不是相对于任何特定的字体大小或元素大小。 |
px | 绝对单位,1px等于屏幕上的一个物理像素点 | px是一个固定值,不会根据视口大小或字体大小进行缩放。这使得它在某些情况下更精确,但也可能导致响应性问题。 |
rpx | 微信小程序特有的单位,1rpx等于屏幕宽度的1/750 | rpx是微信小程序中特有的,它旨在提供一种在不同设备上保持一致性的方法。它基于屏幕宽度,但有一个固定的比例。 |
% | 相对于父元素的百分比 | %是相对于父元素的大小。这意味着它会随着父元素的变化而变化,这可以用来创建响应式设计,但也可能导致嵌套元素的大小难以预测。 |
-
px(像素):
- 像素是最基本的单位,它代表屏幕上的一个点。
- 通常用于固定布局,因为它不会根据视口大小或字体大小变化。
.example {width: 200px;height: 100px;font-size: 16px; }
-
em:
- em是相对于当前元素的字体大小。如果当前元素没有设置字体大小,则相对于父元素的字体大小。
- 常用于响应式设计和可伸缩的布局。
.example {font-size: 1em; /* 假设父元素字体大小为16px,则这里的1em等于16px */padding: 1em; /* 相对于当前字体大小 */ }
-
rem(root em):
- rem是相对于根元素(即html元素)的字体大小。
- 在响应式设计中,rem可以提供更好的可预测性,因为它不会受到嵌套元素字体大小的影响。
html {font-size: 16px; } .example {font-size: 1rem; /* 始终等于16px */margin: 2rem; /* 始终相对于根元素的字体大小 */ }
-
vw(视口宽度):
- vw是视口宽度的1%。例如,100vw等于视口的100%宽度。
- 用于创建基于视口宽度的响应式布局。
.example {width: 50vw; /* 元素宽度为视口宽度的50% */height: 50vw; }
-
vh(视口高度):
- vh是视口高度的1%。例如,100vh等于视口的100%高度。
- 同样用于创建基于视口高度的响应式布局。
.example {width: 50vh; /* 元素宽度为视口高度的50% */height: 50vh; }
-
%(百分比):
- 百分比是相对于父元素的尺寸。例如,宽度50%意味着宽度是父元素宽度的50%。
- 常用于创建灵活的布局,特别是在流式布局中。
.example {width: 50%; /* 元素宽度为父元素宽度的50% */height: 50%; }
-
rpx(微信小程序单位):
- rpx是微信小程序特有的单位,它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。
- 在不同设备上,1rpx所代表的实际像素值是不同的,但屏幕宽度始终是750rpx。
/* 微信小程序示例 */ .example {width: 750rpx; /* 无论屏幕大小,宽度始终等于屏幕宽度 */font-size: 24rpx; /* 自适应字体大小 */ }