首页 > 其他分享 >像素

像素

时间:2023-10-09 11:00:12浏览次数:29  
标签:像素 图像 屏幕 设备 CSS 物理

3. 像素相关

3.1 物理像素 / 设备像素

  • 设备像素 / 物理像素 是一个长度单位

  • 物理像素对应显示设备中一个微小的物理部件

  • 设备像素是手机屏幕的一个参数,由手机制造商决定。例如 IPhone 6 的物理像素为 750 * 1334

3.2 设备独立像素 / 设备无关像素

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,
这个点代表一个可以由程序使用的虚拟像素(比如:css像素),然后由相关系统转换为物理像素

设备独立像素,简称 DIP(device-independent pixel),又称为设备无关像素,是一个长度计量单位。

设备独立像素也是手机屏幕的一个参数,由手机制造商决定。例如IPhone 6 的设备独立像素为 375 * 667

1 个设备独立像素可以认为是计算机坐标系统中的一个点,代表可以通过程序控制使用的虚拟像素。

  • 普通屏幕下 1 设备独立像素 等于 1 物理像素
  • 高清屏幕下 1 设备独立像素 等于 N 物理像素
Retina 屏幕

Retina 是苹果公司 2010 年推出的一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。

设备独立像素的出现,使得即使在高分辨率的屏幕下,也可以正常尺寸的显示元素,代码不受到设备的影响。

几款手机的屏幕像素参数,点击这里查看更多

型号 设备像素 设备独立像素
IPhone 3GS 320 * 480 320 * 480
IPhone 4 / 4s 640 * 960 320 * 480
IPhone 5 / 5s 640 * 1136 320 * 568
IPhone 6 / 7 / 8 750 * 1334 375 * 667
HUAWEI P10 1080 x 1920 360 x 640
IPhone X 1125 * 2436 375 * 812

3.5 设备像素比DPR(device pixel ratio DPR)

  • 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
  • 单一方向上 设备物理像素设备独立像素的比例
  • 设备像素比=物理像素/设备独立像素 (在x方向或者y方向)

rem是根据页面的根元素(html body元素)的font-size的一个相对的单位

PPI: 可以理解为屏幕的显示密度

Resolution: 就是我们常说的分辨率

window.devicePixelRatio

像素比的作用

程序可以根据像素比来显示不同的图片,达到清晰显示网页的效果。

@media (-webkit-min-device-pixel-ratio: 2) {
   #box{
       background-image: url('./image/[email protected]');
   }
}

@media (-webkit-min-device-pixel-ratio: 3) {
   #box{
       background-image: url('./image/[email protected]');
   }
}

并不是所有的图片都这样处理,只需要处理那些页面布局需要的图片和图标即可

3.3 CSS 像素 / 逻辑像素

CSS 像素是 CSS 语言中用来表示长度的一个单位,单位为 px。

  • CSS 像素不能直接跟现实中的长度单位换算
  • CSS 像素主要用在 CSS 与 JS 中控制元素的大小与位置

3.4 位图像素

3.4.1 位图和矢量图

  • 位图图像亦称为点阵图像或栅格图像,是由单个的像素点组成的。放大后会失真。
  • 矢量图,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。放大后不会失真。软件有Adobe Illustrator,Sketch

位图像素也是一个长度单位。位图像素是栅格图像(如:png,jpg,gif等)最小的数据单元。

1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示

3.4.2 像素之间的关系

  • 页面不缩放的情况下,CSS 像素 == 独立设备像素 == 逻辑像素 == DIP == 位图像素
  • 在一个标准的显示密度下(普通屏),一个 CSS 像素对应着一个设备像素,高清屏幕下一个 CSS 像素 等于 N 个物理像素

3.4.3 像素密度

屏幕上每英寸可以显示的像素点的数量,单位是 ppi (pixels per inch ),这里还有另一个单位 dpi(dots per inch),两个值的计算方式都一样,只是使用的场景不同。 PPI 主要用来衡量屏幕,DPI 用来衡量打印机,鼠标等设备。

image

苹果曾经给出个一个标准:手机屏幕达到 300PPI、平板屏幕达到 220PPI、笔记本电脑屏幕达到 200PPI 即可认为是 Retina 屏幕。

标签:像素,图像,屏幕,设备,CSS,物理
From: https://www.cnblogs.com/songxia/p/17750988.html

相关文章

  • Python 图片管理工具介绍(筛像素+从文件夹取出图片并放到文件夹内+excel读取)
    功能介绍:这是一个Python脚本工具,用于批量管理和复制图片。其主要功能如下:从Excel表格读取数据:程序使用openpyxl库从Excel文件中读取数据,其中A列包含源图片的路径(可以有多个路径,用逗号分隔),B列包含目标目录。图片筛选:仅复制最小维度大于800像素的图片,这可以确保目标目录中的......
  • 世界坐标系到像素坐标系
    \[z_C\begin{bmatrix}u\\v\\1\end{bmatrix}=\begin{bmatrix}\frac{1}{\mathrm{d}x}&0&u_0\\0&\frac{1}{\mathrm{d}y}&v_0\\0&0&1\end{bmatrix}\begin{bmatrix}f&0&0&0\\0&......
  • Meta推出像素级动作追踪模型,简易版在线可玩 | GitHub 1.4K星
    前言 视频动作跟踪,已经精确到了每个像素!本文转载自量子位仅用于学术分享,若侵权请联系删除欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结、最新技术跟踪、经典论文解读、CV招聘信息。CV各大方向专栏与各个部署框架最全教程整理【CV技术指南】CV全栈指导班、基础入门班......
  • 2023-09-05:请用go语言编写。一个图像有n个像素点,存储在一个长度为n的数组arr里, 每个像
    2023-09-05:请用go语言编写。一个图像有n个像素点,存储在一个长度为n的数组arr里,每个像素点的取值范围[0,s]的整数,请你给图像每个像素点值加上一个整数k(可以是负数),像素值会自动截取到[0,s]范围,当像素值<0,会更改为0,当新像素值>s,会更改为s,这样就可以得到新的arr,想让所有像素点的......
  • vscode和像素大厨使用图片时遇到的问题
    vscode使用图片所遇到的问题1、截屏出来的图片放到像素大厨量时发现量出来的像素太大解决方法一:设置设计图为2x,这样能把误差降低很多,但跟实际大小还是差了一些,可以自己在微调。如下图所示解决方法二:右键图片选择编辑或用画图工具打开,里面设置重新调整大小,调整为你截屏的那个......
  • ITK 实例7 向量图像(将一个向量存储到一个图像像素中)
    1#include"itkVector.h"//向量类的头文件2#include"itkImage.h"34intmain(int,char*[])5{6/*向量类的使用是在基于空间中代表坐标和维数的类型之上进行模板化的。在此例中,向7量的长度和图像长度相匹配,但是并不是完全相同。我们可以用一个三维的向......
  • ITK 实例6 RGB图像像素色彩成分的访问
    1#include"itkImage.h"2#include"itkImageFileReader.h"3//为了使用itk::RGBPixel类,包含头文件4#include"itkRGBPixel.h"5//在ITK中如何表示RGB图像。6intmain(int,char*argv[])7{8//RGBPixeld类的使用是基于用来代表红、绿和蓝的像素......
  • 什么是前端开发领域中的屏幕像素密度 Pixel Density
    当谈论到前端开发中的像素密度(PixelDensity),实际上是在讨论设备屏幕的像素密度,也称为像素密度或PPI(PixelsPerInch)。像素密度是指屏幕上每英寸(2.54厘米)所包含的像素数量。它是一个重要的概念,因为不同的设备在相同尺寸的屏幕上可能拥有不同的像素密度,从而影响显示效果和图像质量。......
  • 相机标定(世界坐标系-->相机坐标系,相机坐标系-->图像坐标系,图像坐标系-->像素坐标系,完
    本篇文章主要介绍如何使用相机标定,实现世界坐标系-->相机坐标系,相机坐标系-->图像坐标系,图像坐标系-->像素坐标系,完成世界坐标系-->像素坐标系。 相机标定内参/畸变系数求解与外参求解代码: (添加:2022-0926)原理介绍如下: 一、世界坐标系转换为相机坐标系相机标定概念:即求解外参旋......
  • 【代码块】-图片-获取各像素点
    整理代码块代码块整理后存储,供后期使用/*这段代码是用于将图像的像素数据锁定、修改、然后再解锁的操作,以实现对图像像素的直接读写*/privatestaticbyte[]LockUnlockBitsExample(Imageimg){//Createanewbitmap.Bitmapbmp=(Bitmap)img;//......