关于像素分辨率及视口的一些概念

设备像素:

屏幕上的物理像素.

分辨率 :
1.屏幕分辨率 : 屏幕上的像素点个数(横 * 竖)
2.图片分辨率 : 图片中像素点的个数

CSS像素 :
逻辑像素, CSS代码中使用
逻辑像素320x568px-->设备像素640x1136px
(1*1CSS像素 ==> 2*2个物理像素 : 设备像素比)

设备像素比 :
DPR = 物理像素数 / 逻辑像素数
dpr=2时，1个CSS像素由4个物理像素点组成.
window.devicePixelRatio

像素密度 :
显示密度dip/ppi
物理像素/物理尺寸
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

##设备独立像素 :
安卓用来适配机型.
dip : 参考像素密度160.

视口 :
布局视口 : 远大于屏幕宽度,缩小网站显示.
视觉视口 : 屏幕物理像素尺寸.
理想视口 : meta-widht

时间： 2024-08-08 09:39:12

关于像素分辨率及视口的一些概念的相关文章

像素-分辨率对应表

像素值 相机所说的像素,其实是最大像素的意思,像素是分辨率的单位,这个像素值仅仅是相机所支持的有效最大分辨率. 30万 640×48050万 800×60080万 1024×768 5" (3.5×5英寸)130万 1280×960 6" (4×6英寸)200万 1600×1200 8"(6×8英寸) 5"(3.5×5英寸)310万 2048×1536 10"(8×10寸) 7"(5×7英寸)430万 2400×1800 12"(10×

像素,分辨率，PPI（像素密度）,BPP 扫盲

像素于分辨率 像素,又称画素,为图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为pel(picture element).每个这样的信息元素不是一个点或者一个方块,而是一个抽象的采样.仔细处理的话,一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块:但是在很多情况下,它们采用点或者方块显示.每个像素可有各自的颜色值,可采三原色显示,因而又分成红.绿.蓝

像素和分辨率的区别

这是维基百科上面的关于“每英寸像素”中的图片.这是一张200×200像素的图片,当我们把它下载到屏幕上,并且100%呈现的时候,如果它在电脑屏幕上呈现的越大,则表明我们的电脑分辨率越低,而呈现的越小,则表明电脑的分辨率越高. 当我们将一张2000×2000大小像素的图片100%比例大小呈现在我们桌面上的时候,我们的正常的笔记本电脑(1024×800)是无法全部显示其信息的.为了将所有的信息显示在屏幕上,我们需要将其进行缩放,也就是信号中的抽样.如图所示:这样势必会造成像素的损失.这也就是为什么我

移动前端中viewport(视口)

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系. (1) layout viewport(布局视口) 一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网

ViewPort视口

一个典型的针对移动端优化的页面会包含类似这样的内容: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 其中的name="viewport"中的viewport我们称作视口 常说的viewport-视口就是显示器显示页面内容的屏幕区域 1.layout viewport(

07-移动端开发教程-移动端视口

老马初始学习视口的概念的时候,看了很多的文章,看来很多的资料,鲜有人能把这个东西讲的非常透彻的.老马接下来就从初学者能看懂的角度去讲解视口和适配的方案. 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度.比如:iphone6/7是4.7寸,iphone6/7p是5.5寸. 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0i

移动WEB开发--CSS像素、设备独立像素、设备像素之间关系

CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在 设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素 设备像素(Device Pixel):物理像素,设备能控制显示的最小单

浅谈移动端中的视口（viewport）

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. 而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport).视觉视口(Visual Viewport)和理想视口(Ideal Viewport). 本文主要讨论移动端中的视口. 1. 基本概念 1.1 两种像素 像素是计算机屏幕中显示特定颜色的最小区域.屏幕中的像素越多,同一

精通移动端布局 - 概念篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换