做网站没装数据库,上海闵行网站建设公司,网络营销的内容有哪些方面,施工企业财务管理制度及报销流程文章目录 一、背景二、介绍CSS像素设备像素设备独立像素dprppi 三、总结参考文献 一、背景
在css中我们通常使用px作为单位#xff0c;在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素
这会造成一种错觉#xff0c;我们会认为css中的像素就是设备的物理像素
但实… 文章目录 一、背景二、介绍CSS像素设备像素设备独立像素dprppi 三、总结参考文献 一、背景
在css中我们通常使用px作为单位在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素
这会造成一种错觉我们会认为css中的像素就是设备的物理像素
但实际情况却并非如此css中的像素只是一个抽象的单位在不同的设备或不同的环境中css中的1px所代表的设备物理像素是不同的
当我们做移动端开发时同为1px的设置在不同分辨率的移动设备上显示效果却有很大差异
这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念 二、介绍
CSS像素
CSS像素css pixel, px: 适用于web编程在 CSS 中以 px 为后缀是一个长度单位
在 CSS 规范中长度单位可以分为两类绝对单位以及相对单位
px是一个相对单位相对的是设备像素device pixel
一般情况页面缩放比为11个CSS像素等于1个设备独立像素
CSS像素又具有两个方面的相对性
在同一个设备上每1个 CSS 像素所代表的设备像素是可以变化的比如调整屏幕的分辨率在不同的设备之间每1个 CSS 像素所代表的设备像素是可以变化的比如两个不同型号的手机 在页面进行缩放操作也会 引起css中px的变化假设页面放大一倍原来的 1px 的东西变成 2px在实际宽度不变的情况下1px 变得跟原来的 2px 的长度长宽一样了元素会占据更多的设备像素
假设原来需要 320px 才能填满的宽度现在只需要 160px
px会受到下面的因素的影响而变化
每英寸像素PPI设备像素比DPR
设备像素
设备像素device pixels又称为物理像素
指设备能控制显示的最小物理单位不一定是一个小正方形区块也没有标准的宽高只是用于显示丰富色彩的一个“点”而已
可以参考公园里的景观变色彩灯一个彩灯(物理像素)由红、蓝、绿小灯组成三盏小灯不同的亮度混合出各种色彩 从屏幕在工厂生产出的那天起它上面设备像素点就固定不变了单位为pt
设备独立像素
设备独立像素Device Independent Pixel与设备无关的逻辑像素代表可以通过程序控制使用的虚拟像素是一个总体概念包括了CSS像素
在javaScript中可以通过window.screen.width/ window.screen.height 查看
比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏我们把它调为 1440x900”这里的“分辨率”非严谨说法指的就是设备独立像素
一个设备独立像素里可能包含1个或者多个物理像素点包含的越多则屏幕看起来越清晰
至于为什么出现设备独立像素这种虚拟像素单位概念下面举个例子
iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸但 iPhone 3GS 的分辨率是 320x480iPhone 4/4s 的分辨率是 640x960
这意味着iPhone 3GS 有 320 个物理像素iPhone 4/4s 有 640 个物理像素
如果我们按照真实的物理像素进行布局比如说我们按照 320 物理像素进行布局到了 640 物理像素的手机上就会有一半的空白为了避免这种问题就产生了虚拟像素单位
我们统一 iPhone 3GS 和 iPhone 4/4s 都是 320 个虚拟像素只是在 iPhone 3GS 上最终 1 个虚拟像素换算成 1 个物理像素在 iphone 4s 中1 个虚拟像素最终换算成 2 个物理像素
至于 1 个虚拟像素被换算成几个物理像素这个数值我们称之为设备像素比也就是下面介绍的dpr
dpr
dprdevice pixel ratio设备像素比代表设备独立像素到设备像素的转换关系在JavaScript中可以通过 window.devicePixelRatio 获取
计算公式如下 当设备像素比为1:1时使用11×1个设备像素显示1个CSS像素
当设备像素比为2:1时使用42×2个设备像素显示1个CSS像素
当设备像素比为3:1时使用93×3个设备像素显示1个CSS像素
如下图所示 当dpr为3那么1px的CSS像素宽度对应3px的物理像素的宽度1px的CSS像素高度对应3px的物理像素高度
ppi
ppi pixel per inch每英寸像素表示每英寸所包含的像素点数目更确切的说法应该是像素密度。数值越高说明屏幕能以更高密度显示图像
计算公式如下 三、总结
无缩放情况下1个CSS像素等于1个设备独立像素
设备像素由屏幕生产之后就不发生改变而设备独立像素是一个虚拟单位会发生改变
PC端中1个设备独立像素 1个设备像素 在100%未缩放的情况下
在移动端中标准屏幕160ppi下 1个设备独立像素 1个设备像素
设备像素比dpr 设备像素 / 设备独立像素
每英寸像素ppi值越大图像越清晰 参考文献
https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_pixelhttps://hijiangtao.github.io/2017/07/09/Device-Viewport-and-Pixel-Introduction/ 希望本文能够对您有所帮助如果您有任何问题或建议请随时在评论区留言联系 章挨踢章IT 谢谢阅读
