8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问
物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么?
# 回答
- 物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点。
- 逻辑像素表示屏幕展示物体的视觉尺寸是多少。逻辑像素相同表示物体看起来或者打印出来大小一样,物理像素点越小,一个逻辑像素包含点物理像素点就越多,看起来就越清晰。
- 一般情况下CSS像素等同于逻辑像素,但浏览器可以放大,手机也有放大模式,此时就不再相等。
- PPI是屏幕对角线的物理像素的个数除以对角线英寸数。
- 设备像素比是在水平或者垂直方向,在同一排一个逻辑像素能放几个物理像素。
# 解析
物理像素
也称为设备像素,屏幕的最小物理单位。需要注意的是一个像素并不一定是一个小正方形区块,也没有标准的宽高,只是用于显示丰富色彩的一个“点”而已。可以参考公园里的景观变色彩灯,一个彩灯(物理像素)由红、蓝、绿小灯组成,三盏小灯不同的亮度混合出各种色彩。比如当我们打开Iphone12的官网,产品参数里“2340 x 1080 像素分辨率”指的就是设备像素,表示屏幕水平有1080个点,垂直有2340个点。
背景故事:关注手机配置的同学会听到华为P40排列用的是“周冬雨排列”(上图右上角),显示效果没有三星屏的排列好。之所以国产屏用这种奇怪的排列方式,是因为起步晚其他排列早被其他厂商申请了专利。
逻辑像素
也称作设备独立像素。比如我们偶尔会说“电脑屏幕在 2560x1600分辨率下字太小了,我们把它调为 1440x900”,这里的“分辨率”(非严谨说法)指的就是设备独立像素。可以通过 window.screen.width/ window.screen.height 查看。另外,平时我们所说的 iphone12mini的逻辑像素是375 x 812,iPhone12 Pro Max的的逻辑像素是400 x 880。
一个设备独立像素里可能包含1个或者多个物理像素点,包含的越多则屏幕看起来越清晰。
仅需要物理像素难道不够吗?为什么要有逻辑像素呢?因为物理像素仅代表像素点的个数,并没有有规定一个点实际的尺寸是多少。假设有一个按钮,宽度用100个物理像素表示,因屏幕物理像素排列方式和密度的差异,不同屏幕上实际的视觉宽度必然不一样。而逻辑像素相同就表示希望按钮在不同屏幕上看起来一样大。
PPI (pix per inch)
每英寸的物理像素数。以尺寸为5.4英寸(屏幕对角线长度)、分辨率为1080 x 2340的iPhone12 mini为例, ppi = Math.sqrt(1080*1080 + 2340*2340) / 5.4 ,值为 476PPI。
CSS像素
浏览器使用的单位,用来精确度量网页上的内容,比如 div { width: 100px; }。在一般情况下(页面缩放比为1),1个CSS像素 等于 1个设备独立像素。比如,假设把屏幕独立像素分辨率设置为1440x900,给页面元素设置为宽度720px,则视觉上元素的宽度是屏幕宽度的一半。这也解释了为什么当我们把独立像素分辨率调高后网页的文字感觉变小了。当页面缩放比不为1时,CSS像素和设备独立像素不再对应。比如当页面放大200%,则1个CSS像素等于4个设备独立像素。
设备像素比
设备像素比(DevicePixelRatio)指的是设备物理像素和逻辑像素(device-independent pixels, dips)的比例 。比如iPhone12 mini的DPR是3。
作者 @饥人谷若愚
「前端剑指offer第1期」CSS选择器优先级是怎样计算的?
「前端剑指offer第2期」一侧定宽、一侧自适应,尽量多的方案实现?
8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...相关推荐
- vue中向数组去重_「前端剑指offer第3期」来,手写一下数组去重
数组去重一般来说就这么几种方法,理解代码,记住就好!Map.Set.reduce.filter~ 方法1 .Map 创建一个Map对象,把数组的值作为Map对象的索引,再获取所有的索引. const ...
- background背景图片自适应_一侧定宽、一侧自适应,尽量多的方案实现?「前端剑指offer」...
# 问题 一侧定宽.一侧自适应,尽量多的方案实现. # 回答 有下面几种方案能实现一侧定宽一侧自适应. 使用flex布局,这也是目前主流方式.父容器设置display:flex,定宽字元素设置flex ...
- python加减法计算题 代码_关于《剑指offer》中不用加减乘除做加法的Python代码的问题...
题目如下: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题目不难,可以采用位操作来实现,利用异或运算来计算不带进位的加法结果,利用与运算计算进位的标志,然后将这两个 ...
- leetcode 打印_剑指 Offer 总结 - leetcode 剑指offer系列
剑指 Offer 系列完结撒花!! 本篇文章是对整个系列的精华总结, 对系列的每篇文章进行了分类, 并用一句话概括每道题的思路, 方便大家理解和记忆, 当然也包含原文完整链接供大家参考 总的来说, 写 ...
- LeetCode刷题 _「剑指 Offer]专项突破版
第01天 整数 剑指 Offer II 001. 整数除法 class Solution:# 时间复杂度:O(logn), 空间复杂度:O(1)def divideCore(self, dividen ...
- 对分查找的最多次数_「剑指offer题解」数组中出现次数超过一半的数字
关注我--个人公众号:后端技术漫谈 我目前是一名后端开发工程师.主要关注后端开发,数据安全,网络爬虫,物联网,边缘计算等方向. 原创博客主要内容 Java知识点复习全手册 Leetcode算法题解析 ...
- 剑指offer刷题 --前端(javascript)
剑指offer 1.二维数组中的查找 题目描述 思路 代码 2.替换空格 题目描述 思路 代码 3.从尾到头打印链表 题目描述 思路 代码 4.重建二叉树 题目描述 思路 代码 5.用两个栈实现队列 ...
- java 滑动窗口_【Java】 剑指offer(59-1) 滑动窗口的最大值
本文参考自<剑指offer>一书,代码采用Java语言. 题目 给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如,如果输入数组{2, 3, 4, 2, 6, 2, 5, 1 ...
- java 加法不用_【Java】 剑指offer(65) 不用加减乘除做加法
本文参考自<剑指offer>一书,代码采用Java语言. 题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.×.÷四则运算符号. 思路 对数字做运算,除了四则运算外,只剩下位 ...
最新文章
- 基于yolov5和deepsort的行人车辆的检测、跟踪和计数(课程设计)
- 从 C++ 到 Objective-C
- c 将图片存入到mysql数据库中_如何将图片转换存入到数据库中,并从数据库中取出转换成图片...
- BAPI_SALESORDER_CREATEFROMDAT2 BAPI创建VA01 销售订单
- tiny cc在云服务centos上运行
- Spring MVC 数据回显
- C++中new int()与new int[]区别
- Logisim元件用法详解五:Memory 储存库
- 如何绘制高质量业务流程图
- 牛学长苹果数据管理工具
- TTTTTTZZZZZZ(系统编程---初识线程,查看线程调用栈的三种方法)10
- 一、Java虚拟机概述与JVM结构
- BugKu——snowfall的WP
- Linux版本有哪些
- [旋转卡壳]最大土地面积 AcWing2617
- exit()和return的含义及区别
- 数据结构与算法之树结构基础
- MAX40026 280ps高速比较器
- 【剑指offter】二维数组中的查找
- 基于QTC++的线激光标定+测距模型
热门文章
- java web与android互通的aes算法
- wordpress在新窗口打开留言者链接
- MS SQLSERVER 各种乱七八糟
- java http2_探索HTTP/2: HTTP 2协议简述(原)
- 数据可视化机器学习工具在线_为什么您不能跳过学习数据可视化
- 视频播放问题和提高性能方案
- leetcode207. 课程表(dfs/bfs)
- 异步解耦_如何使用异步生成器解耦业务逻辑
- react 中渲染html_如何在React中识别和解决浪费的渲染
- 代码走查和代码审查_如何避免代码审查陷阱降低生产率