首页 > 移动平台 > 详细

论浏览器移动端视窗与布局

时间:2020-01-22 20:15:34      阅读:112      评论:0      收藏:0      [点我收藏+]

in:inches的缩写,英寸。就是屏幕的物理长度单位。一英寸等于2.54cm。比如Android手机常见的尺寸有5寸、5.5寸、6寸等,这里的长度都是指手机对角线的长度。

ppi像素密度:每英寸多少像素数;ppi = √(长度像素数^2+宽度像素数^2)/屏幕尺寸

lpi(线每英寸)

dpi:点每英寸

技术分享图片

 

 

 

DP:设备像素(物理像素);由厂商制定,不同厂商的标准不一样;单位pt;ptcss单位中属于真正的绝对单位,1pt = 1/72(inch),inch及英寸,而1英寸等于2.54厘米

DIP(density- independent pixel),dp:设备独立像素(这是Android中的叫法,就是web开发中CSS像素),也称为逻辑像素;CSS像素 =设备独立像素 = 逻辑像素;可以用来辅助区分视网膜设备还是非视网膜设备;与屏幕密度(硬件)有关

dpr:设备像素比;DPR = 物理像素 / 设备独立像素;一般是ppi/160的整数倍;devicePixelRatio = 物理像素 / 独立像素

 

所有非视网膜屏幕的iphone在垂直的时候,宽度为320物理像素,当你使用;

 

<meta name="viewport" content="width=device-width">

 

 的时候,会设置视窗布局宽度(不同于视觉区域宽度,不放大显示情况下,两者大小一致)为320px, 于是,页面很自然地覆盖在屏幕上。

而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置

 

<meta name="viewport" content="width=device-width">

 

的时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。

这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2

从以上现象得出的结论是:
UI设计师按照手机物理像素出设计稿,切图时根据其设备像素比来换算设备独立像素(CSS像素),比如视网膜手机iPhone6,物理像素750px×1334px,由于其设备像素比为2,CSS切图时需要将设计稿的所有尺寸除以2,才是正确CSS像素值。

 

注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了

屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)

分概念:

visual viewport:视觉视口;物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多

 

layout viewport:布局视口;

 

ideal viewport:理想视口;

DIP

论浏览器移动端视窗与布局

原文:https://www.cnblogs.com/chargeworld/p/12229448.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!