1.1物理像素

手机屏幕横向有828个点

手机屏幕纵向上有1792个点

同等大小屏幕下，点越多、图像显示越精细

上面所说屏幕上一个个点就是物理像素(physical pixel)

物理像素也叫设备像素(dp:device pixel)

1.2逻辑像素

pt: html css中的使用的单位像素px: 实际上指的是逻辑像素pt

px: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点, 大小固定

一个pt可以包含多个物理像素px

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

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

不同设备下的分辨率不同, 在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样式以及放两倍图。

有一张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