移动Web开发基础概念

1 像素

---

1.1 分辨率

以物理像素作为基准，不同设备的物理像素单位大小不同

1.2 物理像素 (设备像素)

物理像素只与设备有关

1.3 CSS像素 (逻辑像素)

实际开发中使用的像素

1.4 设备像素比 (dpr)

dpr = 物理像素 / CSS像素
dpr = 2，表示1个 CSS 像素用 2x2 个设备像素来绘制

1.5 标清屏和高清屏

标清屏下(Standard)，一个 CSS 像素由一个物理像素描述，dpr = 1
高清屏下(Retina)，一个 CSS 像素由 2x2 的缩小物理像素描述，dpr = 2

1.6 缩放

缩放改变的是CSS像素的大小

1.7 PPI/DPI

每英寸的物理像素点 (对角线英寸)
PPI: pixels per inch
DPI: dots per inch

2 视口 (viewport)

---

在html的head标签内：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximue-sacle=1,minimum-scale=1">

含义：将页面的视口宽度调整为设备的宽度

还可以将content改为"initial-scale=1"，意思就是缩放比为1，即不缩放，只有当页面视口与设备宽度一致时才不会缩放，所以与上面的等价，通常情况下为了兼容不同的浏览器，需要两种都写上去

3 CSS属性之box-sizing

---

3.1 回顾一下盒子模型

一个盒子就是在页面中所占据的空间大小，从外层算起，margin(不可见)，下层是border，再下层是padding，最内层就是content。

3.2 box-sizing: content-box

该取值为默认值，盒子模式下，margin看不见，border包含了padding、content，此时增大padding，会在原来content的基础上向外扩展padding，增大了盒子的占位，该状态下宽高属性对应的是content的宽高。

3.3 box-sizing: border-box

盒子模式下，margin看不见，border包含了padding、content，此时增大padding，会在原来border的基础向内挤压content，盒子的占位不会改变，该状态下宽高对应的是border以内的宽高。