UI

Device Pixels(设备像素)

一个设备像素（或者称为物理像素）是显示器上最小的物理显示单元。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

PPI(pixels per inch)

屏幕密度指的是单位面积里物理像素的数量，通常以PPI(pixels per inch)为单位。苹果公司为它的双倍屏幕密度的显示器（double-density displays）创造了一个新词“Retina”，声称在正常的观看距离下，人眼无法在Retina显示器上分辨出单独的像素。

与设备无关的像素（DIPs,device-independent pixels）

CSS pixel是浏览器使用的抽象单位，用来精确的、统一的绘制网页内容。通常，CSS pixels被称为与设备无关的像素（DIPs,device-independent pixels）。在标准密度显示器（standard-density displays）上，1 CSS pixel对应一个物理像素。

物理像素与DIPs的比例

物理像素与CSS pixel 的比率可以通过媒体查询的device-pixel-ratio来检测（device-pixel-ratio兼容性）。也可以通过javascript的window.devicePixelRatio来获取该比率。

解决方案

HTML

动态的设置视口，即viewport为1/2或者1/3，用js计算，并动态添加meta。

CSS

通过媒体查询进行设置

JavaScript

像素密度可以通过javascript的window.devicePixelRatio来查询

SVG(Scalable Vector Graphics)

由于位图本身固有的性质，不可能无限制的缩放。而恰恰这是矢量图的优势所在。

Icon Fonts

Twitter的 bootstrap使Icon Fonts 更加的流行，该技术是通过@font-face引入基于icon的字体来代替位图icon，这样icon就不再受分辨率影响。用纯色icon代替字母的web Fonts，可以用CSS来调整样式，就像网页里其它文本一样。

使用渐进式 JPEG 来提升用户体验

今天才认识到原来JPEG文件有两种保存方式，分别是Baseline JPEG（标准型）和Progressive JPEG（渐进式）。两种格式有相同尺寸以及图像数据，扩展名也是相同的，唯一的区别是二者显示的方式不同。

Baseline JPEG

这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive JPEG。

Progressive JPEG

和Baseline一遍扫描不同，Progressive JPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。

渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验。（瀑布留的网站建议还是使用标准型的）

另外渐进式的图片的大小并不会和基本的图片大小相差很多，有时候可能会比基本图片更小。渐进式的图片的缺点就是吃用户的CPU和内存，不过对于现在的电脑来说这点图片的计算并不算什么。

如何保存Progressive JPEG图片

PhotoShop

在photoshop中有“存储为web所用格式”，打开后选择“连续”就是渐进式JPEG。