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

1.1物理像素

手机屏幕横向有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

4. 不同设备下的分辨率不同, 在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, 于是，页面很自然地覆盖在屏幕上。

这样，非视网膜屏幕的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样式以及放两倍图。
  有一张200x200像素的图片（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