响应式设计相关

[DeanPaul]

什么是响应式设计？

一套UI可以自动响应不同设备screen size，保证内容和布局表现良好。

[DeanPaul]

自适应设计

应用程序使用多个版本的UI，针对不同设备screen，服务端返回不同界面

[DeanPaul]

自适应vs响应式

1. 自适应是多套用户界面，而后者则只有一套用户界面；
2. 自适应需要服务端检测请求设备分辨率相关信息，然后选择对应版本返回；
3. 自适应可以在不同版本使用不同适配方案，如在PC端使用百分比，在移动端使用rem等，而响应式则需要一个完美兼容的适配方案； 以头条网站为例，访问www.toutiao.com PC端会打开PC版本web应用，而在移动端打开，则服务端会重定向至m.toutiao.com，对应的返回的就是移动端版本web应用；

[DeanPaul]

移动优先（Mobile first） 渐进增强（Progress enhancement）

[DeanPaul]

屏幕（screen）

前面讲响应式就是响应屏幕尺寸，那么屏幕尺寸如何衡量呢？主要从尺寸单位，设备独立像素和像素密度等角度考虑。

物理尺寸（Display size ／Physical size）

屏幕物理尺寸，指根据屏幕对角线（diagonal）测量的实际物理尺寸，这里的寸都指（英寸）

逻辑尺寸（Logic size ／Display resolution）

展示分辨率（resolution），以像素（pixel）为单位计量。

逻辑尺寸分别从横向（宽），纵向（高）两个方向表示屏幕的尺寸：width，height。 以一台“1024 × 768”分辨率的笔记本为例，这表示设备屏幕的宽是1024像素，高为768像素。

[DeanPaul]

物理像素（device pixel）

物理像素，也叫设备像素，实际像素，在计算机数字图像中，一个像素（pixel）或一个点（dot）是在一个光栅图片（raster image）中的一个物理点，它是图像在屏幕上展示的的最小可控制元素。

[DeanPaul]

CSS像素（CSS Pixel）

逻辑像素，虚拟像素，它仅仅是描述图像单元信息的概念，通常描述图像中某一个小方框所需要展示的颜色值，而这一些列方框点合起来就能描述一幅图像，web编程中用来度量网页内容尺寸或位置的就是这个抽象单位。

[DeanPaul]

分辨率（resolution）

分辨率通厂都是指设备分辨率，即设备屏幕上显示的物理像素总和，以一台“1024 × 768”分辨率的笔记本为例，这表示设备屏幕的宽是1024物理像素，高为768物理像素，它展示的像素总数就是1024*768。

[DeanPaul]

像素密度（Pixel density）

屏幕上每英寸（PPI，Pixel per inch）或每厘米（PPCM，Pixel per centimeter）上拥有的物理像素（或点）的数量，称为像素密度，也作屏幕密度，计算公式为： pixel density(pd) = 屏幕宽度物理像素 ／ 屏幕宽度英寸；

如一个15英寸（对角线）大小的设备，有一个12英寸宽，9英寸高的屏幕，并且其分辨率为1024*768像素，则其像素密度则大概为85PPI： pd = 1024 ／ 12 ～= 768 ／ 9 ～= 85PPI

当然横纵方向上的像素密度并不总是相同的，如将上面例子的分辨率改为1280×1024，则：

1. 横向：pd = 1280 / 12 ~=107PPI;
2. 纵向：pd = 1024 / 9 ~= 114PPI;

[DeanPaul]

设备独立像素（dp／dip）

一个设备独立像素（dp／dip）等于160 dpi（或PPI） 屏幕上的一个物理像素，即等于1 / 160英寸。 而windows则定义一个设备独立像素为96dpi屏幕上的一个物理像素，即1dp等于1 ／96英寸；Apple系统则默认一个设备独立像素为72dpi屏幕上的一个物理像素。

设备像素比

在浏览器中，我们可以使用window.devicePixelRatio获取其dpr值，dpr更高的设备屏幕会使用更多物理像素展示一个设备独立像素，所以其效果更细腻，更精致。如在一个dpr=2的设备上，1个设备独立像素需要使用4个物理像素展示，因为宽高各为2倍。

[DeanPaul]

设备独立像素与CSS像素

上一小节介绍的设备像素比（dpr），通常指物理像素和设备独立像素的比例，我们知道，CSS像素最终是需要转换为物理像素展示的，那么CSS像素如何对应物理像素呢？ 在具体设备上，设备独立像素与物理像素的比例是固定的； 在PC端，通常设备独立像素和CSS像素比例是1:1，CSS像素能以正常比例转换为物理像素展示； 在移动端，为了更好的展现页面，默认情况下会进行缩放，这时设备独立像素和CSS像素比例并不是1:1，所以CSS像素与物理像素的比例就变了，所以我们看到的效果就变了； 当我们使用viewport meta明确设置视口width为理想视口时，视口宽度单位为设备独立像素，同时设置intial-scale=1.0即表明将CSS像素和设备独立像素比例设置为1.0，那么CSS像素到物理像素的转换就能很好的展现我们的UI了。

[DeanPaul]

UI度量（UI Dimension）

[DeanPaul]

英寸（IN）

Inches – Based on the physical size of the screen. 基于屏幕物理尺寸的度量单位，in。

UI像素（PX）

UI像素px，是一个相对单位，与之相对的是设备像素（device pixels）。一个px在不同设备上可能对应不同的物理像素数或（点），这取决于设备像素比（device pixel ratio）。开发页面时，经常使用该单位定义UI的布局和内容尺寸，文字大小，可以在浏览器中实现像素展示良好的UI界面。 但是由于不同设备上使用px单位时不会根据设备屏幕大小进行自适应，尤其是PC和移动端差别比较大，所以一般响应式界面较少用px单位。

磅（PT）

磅，pt，即point，是印刷行业常用单位，等于1/72英寸，它是长度单位，是绝对大小，而px则是相对大小。

PX与PT

前面说了，px是相对大小，pt是绝对大小，所以在不同设备上，他们的关系可能不同，以Android设备为例，一个dp等于160dpi屏幕上的一个物理像素，则： 1dp = 1 ／ 160 inch 而结合前面介绍的pt单位： 1pt = 1 / 72 inch 对于240PPI的屏幕，则：

1. 1dp = 1 / 160 inch = 240 / 160 px = 1.5物理像素；
2. 1px = 1 / 240 inch；
3. 1pt = 0.35物理像素 = 0.35 / dpr CSS像素(px)；

   EM

   em是在web文档中使用的一个缩放单位，1em等于最近父元素的font-size字体尺寸，如最近父元素字体为14pt，则1em=14pt。使用em单位表示的尺寸可以较好的在多终端浏览器进行样式适配。

   REM

   rem也是一个缩放单位，与em相似，都是基于字体尺寸，不同的是rem是基于文档根元素字体尺寸，而与父元素字体尺寸无关，如文档根元素font-size属性为12pt，而最近父元素字体为14pt，则1rem=12pt。 由于rem基于根元素字体大小计算，所以在文档中，任何一处使用rem单位计算基准都一样，使得尺寸计算得到统一，而前面的em则在文档中都是基于最近父元素font-size属性值，这说明在font-size值不同的父元素中使用em单位，计算并不能统一，这也是为什么在目前的PC，移动端多设备适配方案中，rem比em更常见。

   百分比（%）

   还有一个%百分比单位，基于最近父元素的相关属性尺寸，乘以分配的百分比数，如父元素width为10pt，font-size：14pt，则width：10%就是1pt，font-size: 110%为15.4pt（浏览器实际渲染会化为整数渲染）。特别注意的是margin,padding属性值为百分比时，是基于当前元素width值的。

%单位也是一个缩放单位，所以也常用于样式适配。

[DeanPaul]

视口(viewport）

视口(viewport），即可视区域的大小，指浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区域。

视口类型

在开发移动端wap应用时，为了开发体验更友好的界面，需要了解更多视口相关概念，通常将视口分为三种：视觉视口，布局视口，理想视口。

视觉视口（VISUAL VIEWPORT）

视觉视口是指当前屏幕上页面的可见区域。用户可以滚动来改变当前页面可见部分，或者缩放来改变视觉视口的尺寸。 visual viewport默认可以通过window.innerWidth来获取，另外用户可以通过缩放来改变visual viewport的尺寸，缩小时，visual viewport值变大，放大时，visual viewport值变小。