设备像素、css像素、设备独立像素、dpr、ppi之间的区别

简介: 设备像素、css像素、设备独立像素、dpr、ppi之间的区别

设备像素

设备像素(device pixels),又称为物理像素,指设备能控制显示的最小物理单位,单位(pt)

css像素

CSS像素(css pixel):在css中以px为后缀,是一个长度单位

在css规范中,长度单位可以分为绝对单位以及相对单位

px是一个相对单位,相对的是设备像素

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

  • 在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(比如调整屏幕的分辨率)
  • 在不同的设备之间,每1个 CSS 像素所代表的设备像素是可以变化的(比如两个不同型号的手机)
  • 在页面进行缩放操作也会 引起css中px的变化,假设页面放大一倍,原来的 1px 的东西变成 2px,在实际宽度不变的情况下1px 变得跟原来的 2px 的长度(长宽)一样了(元素会占据更多的设备像素)

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

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

设备独立像素

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

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

如果我们按照真实的物理像素进行布局,比如说我们按照 320 物理像素进行布局,到了 640 物理像素的手机上就会有一半的空白,为了避免这种问题,就产生了虚拟像素单位,1 个虚拟像素被换算成几个物理像素,这个数值我们称之为设备像素比(dpr)

dpr

  • dpr = 设备像素/设备独立像素
  • 当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素
  • 当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素
  • 当设备像素比为3:1时,使用9(3×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),值越大,图像越清晰
目录
相关文章
|
4天前
|
前端开发 Ruby
CSS 预编语言的区别
【10月更文挑战第24天】Sass、Less 和 Stylus 等 CSS 预编语言在语法特点、功能特性、性能表现、社区和生态系统等方面存在着不同之处。在选择使用哪种预编语言时,需要综合考虑项目需求、团队技术偏好、个人习惯等因素。你可以根据具体情况进行评估和选择,以充分发挥这些语言的优势,提高前端开发的效率和质量。
|
4天前
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中,这些概念相互关联,共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系,以便更好地进行网页设计和优化,确保在各种设备上都能提供良好的用户体验。
WK
|
2月前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
45 3
|
23天前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
30 0
|
3月前
|
前端开发
css中px和em的区别
css中px和em的区别
56 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
6天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
42 6
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!