H5W3
当前位置:H5W3 > CSS3 > 正文

物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口

1.1物理像素

物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口
手机屏幕横向有828个点
手机屏幕纵向上有1792个点
同等大小屏幕下,点越多、图像显示越精细
上面所说屏幕上一个个点就是物理像素(physical pixel)
物理像素也叫设备像素(dp:device pixel)

1.2逻辑像素

  1. pt: html css中的使用的单位像素px: 实际上指的是逻辑像素pt
  2. px: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点, 大小固定
  3. 一个pt可以包含多个物理像素px

在iphone6中一个单位的逻辑像素包含2个物理像素

iphone的分辨率为375667 实际上指的是逻辑像素为375667, 所以一般移动端的设计图纸一般是给的是750*1334, 是因为一个逻辑像素pt包含两个物理像素px

  1. 不同设备下的分辨率不同, 在iphone6s中 一个逻辑像素pt包含三个物理像素px 即 1pt = 3px

1.3设备像素比

1.3.1定义

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
所有非视网膜屏幕的iphone在垂直的时候,宽度为320物理像素。当你使用的时候,会设置视窗布局宽度(不同于视觉区域宽度,不放大显示情况下,两者大小一致,见下图)为320px, 于是,页面很自然地覆盖在屏幕上。
物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口
这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此,window.devicePixelRatio等于1.
而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置的时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。
这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2.

1.4 PPI

在计算机中,每英寸像素(ppi)是显示屏上锐度(即,照射点的密度)的度量。的点间距确定每英寸的可能像素的绝对限制。然而,为显示器设置的像素(图像元素)的显示分辨率通常不如点间距精细。给定图像分辨率的每英寸像素将基于整个屏幕尺寸而不同,因为相同数量的像素在不同空间上展开。有时使用从打印介质延伸的术语“每英寸点数”(dpi)代替每英寸像素。
严格地说,PPI 测量像素密度,如计算机和其他设备上的监视器所使用的那样。与DPI一样,PPI 也被误认为是屏幕分辨率的测量值。事实并非如此。分辨率是指给定图像中的实际像素数,有时是根据宽度和高度。PPI 也是光栅化图像的重要指标,我们将在稍后介绍。存在过度简化的风险,将 PPI 视为数据输入并将 DPI 视为预期输出可能是有用的。像素不会一对一地转换为点。几乎任何 PPI 都可以打印到任何 DPI 中。不同之处在于,即使打印浓度设置为高 DPI,低 PPI 图像仍然看起来模糊。PPI 越高,打印机转换成“点”的信息就越多。您希望 PPI 尽可能高,无需从应用程序“升级”图像。具有低 PPI 的图像在显示器上可能看起来很好,但是当使用相同的 DPI 编号打印时看起来很糟糕。一般来说,您的 PPI 应尽可能接近您的预期 DPI。但是,较大的 PPI 通常意味着较大的文件大小。您可能希望降低 PPI 以获得更易于管理的文件。实际上,根据具体设计和最终印刷品的预期观察距离,质量也可能没有明显的损失。

1.5 为什么需要二倍图

对于位图而言:

  • 当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,导致一个完全保真的显示。因为一个位置像素不能进一步分裂
  • 当在Retina屏幕下时,他要放大四倍来保持相同的物理像素的大小,这样就会丢失很多细节,造成失真的情形。换句话说,每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。
    工作原理:
    方法一:
    利用css样式以及放两倍图。
    有一张200×200像素的图片(CSS像素,也就是普通像素点或者说是标准像素点),我们给图片设置一个CSS样式:

img{

width:200px;

height:200px;

}

图片模糊的情况:固定好css像素。将width和height固定好。此时在这个width和height 对于不同的显示器包含的像素已经确定了。然后在两种不同屏幕上放图片:那么Ritina屏幕图片会模糊。因为没有css像素的width height所对应Retina显示器的像素数那么多。你硬生生的把这张图片拉成那么大。必然模糊。

在iPad2或Mini iPad中就是很正常显示的图片;但是,在New iPad中,1个CSS像素点实际上有4个位图像素点,1个分成4个,显然不够分啊,只能颜色近似选取,于是,图片感觉就是模糊的。
因此,要想让视网膜屏幕下的图片高清晰显示,我们需要的图片的原始大小不能是200×200像素,而需要2倍高宽,即400×400像素,CSS像素限制依然是:

img {

width:200px;

height:200px;

}

此时,视网膜屏幕下图片就显示OK了(非视网膜屏幕图片被压缩-减少像素取样——资源浪费!)。

方法二:
查询像素密度:准备两种大小但是一样的图片。利用css的媒体查询或者JS的 Retina.js来调取图片。(浏览器支持是一个问题)

1 css:

可以通过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries可以使用background-image为Retina准备高精密度像素的图片。

1.6盒子模型特点

设置盒子的尺寸以内容为准还是边框为准
传统模式宽度计算:盒子宽度= CSS 中设置的border+width+padding
CSS3 盒子模型:盒子宽度=CSS 中设置的width 里面包含了 border 和 padding
也即是说 CSS3 盒子模型中,padding 和 border 的设置不会撑大盒子了
注意:移动端可以全部使用CSS3盒子模型,PC端如果需要兼容,使用传统模式,不考虑兼容,使用CSS3 盒子模型

1.7 单独为网页制作一个移动版本,可以选择的布局

常见的页面布局方式有:

  • 静态布局 px布局
  • 流式布局(Liquid Layout) 主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用)
  • 自适应布局(Adaptive Layout) 即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围
  • 响应式布局(Responsive Layout) 检测窗口大小利用bootstrap布局
  • 弹性布局(rem/em布局) css3 rem

1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

  • layout viewport(布局视口):在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,就会出现滚动条。js获取布局视口:document.documentElement.clientWidth | document.body.clientWidth
  • visual viewport(视觉视口):用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度。js获取视觉视口:window.innerWidth
  • deal viewport(理想视口):布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。js获取理想视口:window.screen.width

本文地址:H5W3 » 物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址