em,rem,vw,vh,px,rpx,%的用法
| 单位 | 特性 | 注意事项 |
|---|---|---|
| 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; /* 自适应字体大小 */ }