1px等于多长?

2024-06-13 13:48
文章标签 等于 1px 多长

本文主要是介绍1px等于多长?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近以来一直做前端比较多,但是真问起来,1px 等于多长 ?我还真是有点懵逼。

1px 等于一个css 像素长度。

一个css像素长度 是怎么计算的呢?

我们知道 屏幕上的图像是像素点组成的,那么1px是不是就是等于一个像素点呢?

我们知道iphone 6 屏幕尺寸是 375 x667 ,分辨率是 750x1334 。

如果我们想让iphone6一个页面占满屏幕,我们会怎么做呢?

我们会设置 div的宽高分别为 375px 和 667px ,这个可以证明,1px是按照设备的屏幕尺寸(逻辑尺寸)来计算的。

分辨率(物理尺寸),这里我们引申出个专业的名词

逻辑尺寸 设备无关像素 (device-independent pixels (dips))
物理尺寸 物理像素 (physical pixels)

得出一些结论:

dips 是一种度量单位
浏览器并不是根据物理硬件的像素来工作的,而是根据 dips 宽度来工作的。
dips 是将像素值与实际距离联系起来的,不管屏幕的像素密度是多少,dips 为 1px 对应着 CSS 中的 1px,而不是对应物理像素 1px。

但是到现在我们还是不知道1px等于多长,有人说那还不简单么 ,我们用尺子测量一下,iphone6手机屏幕的宽度,除以375,不就是1px的长度么?

这个的确没有毛病,但是我们作为高贵的程序员,高智商人群,怎么能这么去做呢?那不丢份么?(容我先测量一下,万一一会算的不对,不是打脸么…)

做过iOS开发的童鞋,应该知道iOS切图,一般都会切2倍图和3倍图,就是所谓的@2x、@3x为后缀的图片,这个图片到底是什么意思呢?

在这里插入图片描述

仔细观察,你会发现,通过像素尺寸/开发尺寸 的比值,我们就可以知道是需要2x图还是3x图。

这个在前端就牵扯出另一个概念

DPR (Device Pixel Ratio)
window.devicePixelRatio 是设备上物理像素 (physical pixels) 和设备无关像素 (device-independent pixels (dips)) 的比例。
公式表示就是:window.devicePixelRatio = physical pixels / dips
dpr=物理尺寸/逻辑尺寸;

iphone 6 屏幕尺寸是 375 x667 ,分辨率是 750x1334
dpr=750/375=2;
那么横向方向上,1px 等于 2个物理像素点 。

但是这个时候还是不足以知道1px的长度,我们还需要知道一个物理像素点的长度。

我们观察上面的表格,有一个屏幕密度的概念。

PPI (Pixels Per Inch)即像素密度,表示每英寸所拥有的像素数量。

通过上面的概念,那么每个像素等于 1/ppi 英寸,那么1px=dpr * 1/ppi=dpr/ppi

对于iphone 6 1px=2/326=0.00613497;

在这里插入图片描述

这篇关于1px等于多长?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1057479

相关文章

CSS 移动端 1px(线条/边框) 解决方案

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了 小编阅读过其他作者的文章中有写 0.5px 的写法,在理论上最小的单位是 1px。 所以会出现有的设备写 0.5px 无效(没有边框)的情况。 如何使用正确的 1px单位 又能在移动设备上

二叉树的遍历(篇4)判断从根到叶节点的和是否等于某个给定的值

给定二叉树和一个数sum,如果从树的根开始到叶节点的值等于sum,则返回true。 如果没有找到这样的路径,则返回false。 例如, 在上述树根到叶节点存在具有以下和。 21 - > 10 - 8 - 3 23 - > 10 - 8 - 5 14 - > 10 - 2 - 2 因此,返回的值应该只对数字21,23和14. true。对于任何其他数字,返回值应该为false。 算

js 判断是否等于0不要用!

var a = $('#a').val(); // a等于0// 不要用!a,这个可能等于false,因为a可能被认为是字符串if(!a){}// 可以用if(a == 0){}

1秒等于1000毫秒, 1毫秒等于1000微秒,1微秒等于1000纳秒

常用时间单位转换指南 在计算机科学、物理学以及其他领域中,我们经常需要处理不同量级的时间单位。了解这些单位之间的转换关系,可以帮助我们更准确地进行计算和分析。下面是一些常用的时间单位及其相互之间的转换。 时间单位概述 秒(Second, s):基本时间单位,定义为铯-133原子基态的两个超精细能级间跃迁对应辐射的9,192,631,770个周期的持续时间。毫秒(Millisecond, ms

最大值最小值小于等于K的最长长度

使用一个set进行维护中间的数字,然后滑窗

【Leetcode 2283 】 判断一个数的数字计数是否等于数位的值—— 数组计数

给你一个下标从 0 开始长度为 n 的字符串 num ,它只包含数字。 如果对于 每个 0 <= i < n 的下标 i ,都满足数位 i 在 num 中出现了 num[i]次,那么请你返回 true ,否则返回 false 。 示例 1: 输入:num = "1210"输出:true解释:num[0] = '1' 。数字 0 在 num 中出现了一次。num[1] = '2' 。数

3007. 价值和小于等于 K 的最大数字(24.8.21)

前言 感谢皇家笨阿宝的指导 题目 给你一个整数 k 和一个整数 x 。整数 num 的价值是它的二进制表示中在 x,2x,3x 等位置处设置位的数目(从最低有效位开始)。下面的表格包含了如何计算价值的例子。 XnumBinary RepresentationPrice11300000110132130000011011223301110100133130000011011336210

多层感知机不等于神经网络?

在前一章节(https://blog.csdn.net/u012132349/article/details/86166324),我们介绍了感知机可以实现与门、或门、非门。只需给定合适的参数(w1, w2, b)并利用Python就可以简单实现对输入的任意(x1,x2),输出0或1。     今天我们将介绍感知机的局限性(严格说是单层感知机的局限性)。这里我们想用感知机实现异或门,所谓异