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

设备物理像素

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有关。

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

相关推荐
IT瘾君2 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端3 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED3 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪3 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常4 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中4 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木4 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师4 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt