css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?

这篇具有很好参考价值的文章主要介绍了css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
一、背景

在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)

一般情况,页面缩放比为1,1个CSS像素等于1个设备独立像素

CSS像素又具有两个方面的相对性:

  • 在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(比如调整屏幕的分辨率)
  • 在不同的设备之间,每1个 CSS 像素所代表的设备像素是可以变化的(比如两个不同型号的手机)

在页面进行缩放操作也会 引起css中px的变化,假设页面放大一倍,原来的 1px 的东西变成 2px,在实际宽度不变的情况下1px 变得跟原来的 2px 的长度(长宽)一样了(元素会占据更多的设备像素)

假设原来需要 320px 才能填满的宽度现在只需要 160px

px会受到下面的因素的影响而变化:

  • 每英寸像素(PPI)
  • 设备像素比(DPR)

设备像素

设备像素(device pixels),又称为物理像素

指设备能控制显示的最小物理单位,不一定是一个小正方形区块,也没有标准的宽高,只是用于显示丰富色彩的一个“点”而已

可以参考公园里的景观变色彩灯,一个彩灯(物理像素)由红、蓝、绿小灯组成,三盏小灯不同的亮度混合出各种色彩

css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,单位为pt

设备独立像素

设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素

在javaScript中可以通过window.screen.width/ window.screen.height 查看

比如我们会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏,我们把它调为 1440x900”,这里的“分辨率”(非严谨说法)指的就是设备独立像素

一个设备独立像素里可能包含1个或者多个物理像素点,包含的越多则屏幕看起来越清晰

至于为什么出现设备独立像素这种虚拟像素单位概念,下面举个例子:

iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸,但 iPhone 3GS 的分辨率是 320x480,iPhone 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

dpr(device pixel ratio),设备像素比,代表设备独立像素到设备像素的转换关系,在JavaScript中可以通过 window.devicePixelRatio 获取

计算公式如下:css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素

当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素

当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素

如下图所示:
css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
当dpr为3,那么1px的CSS像素宽度对应3px的物理像素的宽度,1px的CSS像素高度对应3px的物理像素高度

ppi
ppi (pixel per inch),每英寸像素,表示每英寸所包含的像素点数目,更确切的说法应该是像素密度。数值越高,说明屏幕能以更高密度显示图像

计算公式如下:
css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
三、总结

无缩放情况下,1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变,而设备独立像素是一个虚拟单位会发生改变

PC端中,1个设备独立像素 = 1个设备像素 (在100%,未缩放的情况下)

在移动端中,标准屏幕(160ppi)下 1个设备独立像素 = 1个设备像素

设备像素比(dpr) = 设备像素 / 设备独立像素

每英寸像素(ppi),值越大,图像越清晰文章来源地址https://www.toymoban.com/news/detail-496536.html

到了这里,关于css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack基础知识八:说说如何借助webpack来优化前端性能?

    一、背景 随着前端的项目逐渐扩大,必然会带来的一个问题就是性能 尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至奔溃 一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节 二、如何优

    2024年02月14日
    浏览(38)
  • webpack基础知识三:说说webpack中常见的Loader?解决了什么问题?

    一、是什么 loader 用于对模块的\\\"源代码\\\"进行转换,在 import 或\\\"加载\\\"模块时预处理文件 webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。如下图所示: 在webpack内部中,任何文件都是模块,不仅仅只是js文件 默认情况下,

    2024年02月14日
    浏览(36)
  • webpack基础知识六:说说webpack的热更新是如何做到的?原理是什么?

    一、是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致整个应用的整体刷新,那页面中的状态信息都会丢失 如果使用的

    2024年02月13日
    浏览(37)
  • webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?

    一、区别 前面两节我们有提到Loader与Plugin对应的概念,先来回顾下 loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目

    2024年02月14日
    浏览(42)
  • iOS设备和蓝牙模块连接基础知识

    iOS设备和蓝牙模块连接基础知识 一:iOS连接外设的几种方式 如图下面几种方式: CoreBluetooth和ExternalAccessory,两个框架,基本上是蓝牙设备与iOS设备连接的方式 有图可知,EAP要MFi认证,要求设备的设计理念符合苹果的要求,不仅可以进行无线蓝牙通信,还可以进行有线通信(

    2023年04月20日
    浏览(49)
  • 【CSS】CSS字体样式【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 📁【CSS选择器全解指南】 文字是网页界面上最常见的元素,而文字的字体、大小和文字样式等都可以通过CSS来设置

    2024年02月05日
    浏览(73)
  • 【CSS】CSS文本样式【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 📁【CSS选择器全解指南】 📁【CSS字体样式】 属性名: color 作用:设置文本的颜色 属性值: 颜色表示方式 表示含

    2024年01月21日
    浏览(46)
  • css 基础知识

    CSS(层叠样式表)是用于描述网页中元素样式和布局的一种标记语言。以下是一些CSS的基础知识: 选择器:选择器用于选择HTML文档中的元素,并为其应用样式。常见的选择器有标签选择器、类选择器和ID选择器。 标签选择器:使用HTML标签名作为选择器,可以选择所有匹配该

    2024年02月10日
    浏览(68)
  • CSS基础知识,必须掌握!!!

    CSS背景属性用于定义HTML元素的背景 CSS属性定义背景效果: background-color - 定义背景颜色 background-image - 定义背景图片 background-repeat - 是否平铺,水平平铺(repeat-x)、垂直平铺(repeat-y)、不平铺(no-repeat) background-attachment - 是否固定背景图片,不随滚动而发生位置改变 bac

    2023年04月09日
    浏览(60)
  • CSS的基础知识讲解

    一般来说我们CSS就是我们对浏览器的第二个操作,就是给网页穿衣服.让网页变得更好看. 在CSS中,选择器用于选择HTML文档中的元素,从而将样式应用于这些元素。选择器通常基于元素的标签名、类名、ID、属性值或父子关系等特征来进行匹配。 标签选择器:选择某个 HTML 标签

    2024年02月05日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包