全面剖析像素单位 px、vp、fp

IT全栈视野
• 阅读 1118

一、像素单位 px px 是像素(Pixel)的缩写,是最常见的屏幕分辨率单位。它是一个绝对单位,表示屏幕上的一个物理像素点。 例如,在一个分辨率为 1920×1080 的屏幕上,一个宽度为 100px 的元素,就会占据屏幕宽度的 100/1920 部分。 优点:直观易懂,在不同设备上显示的大小相对固定。 缺点:在不同分辨率的设备上,可能会导致显示效果不一致。比如,在高分辨率设备上,相同的 px 值会显得更小。

二、像素单位 vp vp 通常指的是视图像素(ViewPort Pixel)。它是相对于设备的视口(viewport)的单位。 在移动设备中,视口的大小可能会根据设备的方向(竖屏或横屏)以及缩放级别而变化。 比如,当用户在手机上进行缩放操作时,vp 的大小也会相应地改变。 优点:能够适应不同的视口尺寸和缩放操作,使页面布局更具灵活性。 缺点:计算相对复杂,需要考虑多种因素来确定实际的显示效果。

三、像素单位 fp fp 可能指的是设备独立像素(Device Independent Pixel),也称为密度无关像素。 它是一种逻辑像素单位,旨在解决不同设备屏幕密度差异导致的显示问题。 例如,在不同密度的屏幕上,相同数量的 fp 所占据的物理空间大致相同。 优点:能够提供相对一致的视觉效果,无论设备的屏幕密度如何。 缺点:对于开发者来说,需要对不同密度的屏幕进行适配和计算。

总之,不同的像素单位在不同的场景和需求中有各自的优势和适用范围。开发者需要根据具体的项目要求和目标用户的设备情况,选择合适的像素单位来实现最佳的显示效果和用户体验。

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
android dp和px之间转换
publicclassDensityUtil{/根据手机的分辨率从dip的单位转成为px(像素)/publicstaticintdip2px(Contextcontext,floatdpValue){
菜园前端 菜园前端
1年前
CSS布局方式-自适应布局
原文链接:什么是自适应布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用%单位来实现自适应布局。优点页面能够兼容不同分辨率的屏幕。缺点因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工
菜园前端 菜园前端
1年前
CSS布局方式-静态布局
原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1
哪吒 哪吒
3年前
栅格布局xs sm md lg xl
1.单位xl对应屏幕1920px超大显示器lg对应屏幕1200px,小于1920px台式19201080显示器md对应屏幕992px,小于1200px适合笔记本sm对应屏幕768px,小于992px适合平板xs对应屏幕<768手机端屏幕例如有如下代码将屏幕分成3列,进行响应式布局当屏幕的大小变成手机般大小(屏幕宽度<768px)时只显示xs2
Python进阶者 Python进阶者
3年前
一篇文章带你了解CSS单位相关知识
大家好,我是皮皮,今天给大家分享一些前端的知识。一、了解CSS单位测量长度的单位可以是绝对的,例如像素,点等,也可以是相对的,例如百分比(%)和em单位。指定CSS单位对于非零值是必须的,因为没有默认单位。丢失或忽略单位将被视为错误。但是,如果该值为0,则可以省略该单位(毕竟,零像素与零英寸是一样的)。注意:长度是指距离测量。长度包括数字值
Wesley13 Wesley13
3年前
Android计量单位px,in,mm,pt,dp,dip,sp和获取屏幕尺寸与密度
Android计量单位px  :是屏幕的像素点in  :英寸mm:毫米pt  :磅,1/72英寸dp :一个基于density的抽象单
Wesley13 Wesley13
3年前
HTML&CSS基础学习笔记1.29
像素和相对长度前面的html博文,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。长度单位总结一下,目前比较常用到px(像素)、em、%百分比,要注意其实这三种单位都是相对单位。1、像素像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素1英寸”)。实际情
Wesley13 Wesley13
3年前
NGUI 屏幕适配(2D UI)
博客内容基于NGUI.3.11.2,讲述NGUI2DUI。设备无关坐标以OpenGL为例,经过各种图形阶段(stage)后,几何形状最终被转换成像素显示在屏幕上。设备屏幕坐标以像素为单位,是设备相关的。不同设备分辨率不一样,即使同一设备,不同窗口的大小也不一样。在不关注具体设备的情况下绘制几何形状,则需要设备无关坐标系统。
Stella981 Stella981
3年前
Android 性能优化之减少UI过度绘制
什么是过度绘制(OverDraw)在多层次重叠的UI结构里面,如果不可见的UI也在做绘制的操作,会导致某些像素区域被绘制了多次。这样就会浪费大量的CPU以及GPU资源。过度绘制最直观的影响就是会导致APP卡顿。还好系统有提供GPU过度绘制调试工具会在屏幕上用不同的颜色,来表明一个像素点位被重复绘制的次数。
IT全栈视野
IT全栈视野
Lv1
我的微信公众号:IT全栈视野 与你分享更多见闻知识。
文章
13
粉丝
2
获赞
2