HTML 移动端布局

 1）布局概念

​    **1. 静态布局**

​    直接使用px作为单位

​    **2. 流式布局**

​    宽度使用%百分比，高度使用px作为单位

​    **3. 自适应布局**

​    创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局

​    **4. 响应式布局**

​    通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用

​    **5. 弹性布局**

​    通常指的是rem或em布局。rem是相对于html元素的font-size大小而言的，而em是相对于其父元素（非font-size的是相对于自身的font-size）

2）基本概念

##### 设备像素比(device pixel ratio)

​        设备独立像素：典型的用途是允许移动设备软件将信息显示和用户交互扩展到不同的[屏幕尺寸](https://baike.baidu.com/item/屏幕尺寸/3031029)。允许应用程序以[抽象](https://baike.baidu.com/item/抽象/9021828)像素为单位进行测量，而底层图形系统将应用程序的抽象像素测量值转换为适合于特定设备的物理像素。

​        设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

> 设备像素比 ＝ 物理像素 / 设备独立像素

在Javascript中，可以通过 `window.devicePixelRatio `获取到当前设备的dpr。

在css中，可以通过 `-webkit-device-pixel-ratio`ÿ