简述 pt、rpx、px、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份,每一小份就是100vh,所以,也是相对单位可随视口大小变化而自动变化。
  • vw:无论视口宽度多少,都将视口宽均分100份,每一小份就是100vw,所以也是相对单位,可随视口大小变化而自动变化。
  • vw 和 vh 本质就是%
  • 这里视口指的是浏览器内部的可视区域大小。

%:

  • 通常认为子元素的百分比完全相对于直接父元素,但是,不总是相对于父元素的对应属性值。
  • 子元素的 top 和 bottom 如果设置百分比,则相对于直接非 static 定位(默认定位)的父元素高度。
  • 子元素的left 和 right 如果设置百分比,则相对于直接非 static 定位父元素的宽度。
  • 子元素的 padding/margin 如果设置百分比,不论是垂直方向或者水平方向,都相对于直接父亲元素的padding/margin,与父元素的height有关。
  • 因为 % 不总是相对于父元素的宽高或者屏幕大小,所以开发少用。

往期热门精彩推荐

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

实战开发相关推荐

前端常用的几种加密方法

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见:个人主页

相关推荐
珍宝商店6 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
白露与泡影14 分钟前
2025互联网大厂高频Java面试真题解析
java·开发语言·面试
蓝莓味的口香糖16 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒17 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser18 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan21 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family23 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_38 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend42 分钟前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理1 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构