em,rem,vw,vh,px,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; /* 自适应字体大小 */
}