CSS尺寸单位详解（rpx、px、pt、em、rem、%、vh、vw的区别）

2023-12-27 18:55:05

设备物理像素
pt：屏幕宽、分辨率，其中每一小份就是1pt。

css 像素

px：pc 机大屏幕显示器，1px约等于0.76个物理像素

手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。

px 也是一个相对单位
px 是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。

手机屏幕大小不一，差异较大，所以反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以移动端不用px。

通常PC端大屏浏览器的网页，使用px 单位比较多。
移动端少用，因为 px 的长度相对固定，无法根据大小不一的移动端设备自适应改变大小。


rem: ?以网页根元素<html>元素上设置的默认字体大小为1rem 默认 1rem=16px

可以实现响应式布局。
响应式布局指的是元素大小能根据屏幕大小随时变化。
所有以 rem 为单位的位置、大小都跟着根元素字体大小而变化。
所以只要在屏幕大小变化的时候改变根元素的 font-size 就可以了。


em: ?父元素的字体大小为1em 用的不多。?
相对于父元素字体大小的单位，多层嵌套可能导致累积计算。
?

rpx: ?小程序专用。

以iPhone 为标准，物理像素750，分辨率 375。无论屏幕大小，都将屏幕分成750份，每份就是1rpx, 1rpx=0.5px=1pt

优点：通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配。


vm/vh: ?CSS3 新特性。

vh: 无论视口高度多少，都将视口高均分为100份，每一小份就是1vh，所以，也是相对单位，可随视口大小变化而自动变化。

vw：无论视口宽度多少，都将视口宽均分100份，每一小份就是1vw，所以也是相对单位，可随视口大小变化而自动变化。

vw 和 vh 本质就是%?

这里视口指的是浏览器内部的可视区域大小。

%: ?通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值。

子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素高度。

子元素的left 和 right 如果设置百分比，则相对于直接非 static 定位父元素的宽度。

子元素的 padding/margin 如果设置百分比，不论是垂直方向或者水平方向，都相对于直接父亲元素的padding/margin,与父元素的height有关。

因为 % 不总是相对于父元素的宽高或者屏幕大小，所以开发少用。

文章来源:https://blog.csdn.net/happyzhlb/article/details/135251138
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。