rem rpx vm,hv,百分比之间的区别

最新推荐文章于 2024-03-07 12:38:35 发布

cc.蓦然

最新推荐文章于 2024-03-07 12:38:35 发布

阅读量474

点赞数

文章标签：面试

本文链接：https://blog.csdn.net/weixin_45441470/article/details/134531673

版权

rem、rpx、vm、hv、百分比都是用于处理布局和尺寸的单位，它们在使用场景和基准值上有所不同。

rem（Root em）：
- 定义： rem 是相对于根元素的字体大小（<html> 元素）的单位。如果根元素的字体大小为 16px，1rem 就等于 16px。
- 使用场景： 适用于需要相对于整个页面的字体大小进行调整的情况，也可用于其他元素的尺寸。
rpx：
- 定义： rpx 是微信小程序中引入的概念，表示可以根据屏幕宽度进行自适应的像素单位。屏幕宽度分为 750 个逻辑像素，1rpx 等于屏幕宽度的 1/750。
- 使用场景： 主要用于微信小程序中，通过 rpx 实现不同屏幕尺寸的适配。
vm（Viewport Width）：
- 定义： vm 是相对于视口宽度的单位，1vm 等于视口宽度的 1%。
- 使用场景： 适用于响应式设计，元素的大小相对于视口的宽度进行调整，特别在移动端设计中常被使用。
hv（Horizontal Vertical）：
- 定义： hv 是一个相对单位，同时定义水平和垂直方向上的值。1hv 等于视口宽度和高度中较小的那个。
- 使用场景： 适用于需要保持相对宽高比例的元素，特别是移动端相对于屏幕宽高比的布局。
百分比：
- 定义： 百分比是相对于父元素的单位，比如 width: 50%; 表示元素宽度为父元素宽度的 50%。
- 使用场景： 适用于相对于父元素大小进行调整的情况，常用于实现响应式设计。