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`，`-webkit-min-device-pixel-ratio`和 `-webkit-max-device-pixel-ratio`进行媒体查询，对不同dpr的设备，做一些样式适配。

3)  移动端适配

        1.em--相对的是父元素的一个font-size

        2.rem--相对的是根节点的font-size

       /* 相对单位 */

        div{

            /* font-size: 20px; */

            width: 5rem;/* em 浏览器默认16px  自身有按自身，无按照父元素*/

            height: 5rem;/* rem 默认16px  */

            background-color: red;

        }

4）移动端适配的k值

k

           1.屏幕尺寸在变

           2.盒子大小在变

           3.位置关系没变--rem(html-font-size)

 移动端设计稿--750px--1/2

 vw:屏幕的宽度 1vw：1%  100%:整个屏幕宽度

 font-size: calc(100vw/750); calc 给css加计算

                         100vw=375px/750

                         alt+s  改变默认转换比例

                         alt+z  转换