px、rpx、em、rem 、vw/vh、百分比的区别？
最新回答
湖畔迷路的孩
2022-04-13 21:53:56
px、rpx、em、rem、vw/vh、百分比的区别：
px（像素）：
- 定义：绝对长度单位，用于描述一个元素的宽高以及定位信息。
- 特点：在PC端，通常认为1px的真实长度是固定的，但实际上CSS像素与物理像素之间存在转换关系，受设备分辨率影响。在移动端，不同设备的分辨率不同，1个CSS像素可以表示的物理像素是不同的。
- 限制：当浏览器页面缩放时，px不能跟随变大，可能导致布局被打破。
rpx（微信小程序响应式像素）：
- 定义：微信小程序独有的、解决屏幕自适应的尺寸单位。
- 特点：可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕下可以实现自动适配。
- 优势：方便设计师与开发者的沟通，因为设计稿上的尺寸可以直接转换为rpx，无需进行单位换算。
em：
- 定义：相对单位，基准点为父节点字体的大小。如果自身定义了font-size，则按自身来计算（浏览器默认16px）。
- 特点：作为字体单位时，相对于父元素字体大小；作为行高单位时，相对于自身字体大小。整个页面内1em不是一个固定的值。
- 应用：常用于需要根据父元素字体大小进行动态调整的场景。
rem：
- 定义：相对单位，可理解为“root em”，相对根节点html的字体大小来计算。CSS3新加属性。
- 特点：rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于其初始字体大小。rem布局的本质是等比缩放。
- 优势：方便进行全局的字体和布局调整，因为所有元素都基于根元素的字体大小进行计算。
vw/vh：
- 定义：vw（viewpoint width）相对于视窗的宽度，vh（viewpoint height）相对于视窗的高度。
- 特点：1vw等于视窗宽度的1%，1vh等于视窗高度的1%。视窗指的是浏览器内部的可视区域大小。
- 应用：常用于创建与视窗大小相关的布局，如全屏背景、动态调整元素大小等。
百分比（%）：
- 定义：相对单位，1%对不同属性有不同的含义。
- 特点：通常认为子元素的百分比完全相对于直接父元素。如font-size: 200%表示字体大小是默认（继承自父亲）字体大小的2倍；width: 100%表示自己content的宽度等于父亲content宽度的1倍。对于top、margin、padding等属性，如果设置百分比，则相对于直接非static定位的父元素的高度或宽度。
- 应用：常用于需要根据父元素大小进行动态调整的场景，如响应式布局中的宽度、高度、边距等。
总结：
- px适用于需要精确控制元素大小的场景，但在多设备、多分辨率的自适应方面存在限制。
- rpx是微信小程序独有的响应式单位，方便设计师与开发者的沟通，实现自动适配。
- em和rem都是相对单位，但rem更常用于全局的字体和布局调整，因为所有元素都基于根元素的字体大小进行计算。
- vw/vh是基于视窗大小的相对单位，常用于创建与视窗大小相关的布局。
- 百分比适用于需要根据父元素大小进行动态调整的场景，如响应式布局中的宽度、高度、边距等。
热门标签
