移动端工作准备

一、meta标签的设置：视口1：1比例、禁止用户缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

二、dpr : 设备像素比例：

1）dpr == 物理像素（把手机上图片截图放在ps中量取的大小） / 逻辑像素（css去设置的像素）

2）dpr怎么获取：

①根据UI设计图而定：绝大部分拿到的设计图的大小  750px/640px/

②针对性对dpr进行获取：

    如果设计图为640px 或者 750px  　　选取dpr 2

    如果设计图为大于750px    　　　　   选取dpr为  3

3）rem  :

①rem相对大小 ： 相对于html的font-size的值而定 默认 1rem == 16px;rem布局（等比缩放）

②计算流程：假如：设计图为750px

            　　  考虑dpr为 2 

                　  ps中量出一个元素为88px

            　　  设置css大小的时候 88px / dpr2 == 44px;

            　　  又因为 不能固定44px ( 44px固定之后就不能放大或者是缩小 )

            　　  所有 44px 转成 rem

            　　  因为 html中font-size:100px;  1rem == 100px;

            　　  44px ==  0.44rem

4）视口单位：

vw      ：  视口的宽的比例  100vw == 视口宽度的100%

vh      ：  视口高度的比例  100vh == 视口高度的100%

vmin   :    视口的宽和高进行比较 谁小我用谁

vmax   ：   视口的宽和高进行比较 谁大我用谁

5）根据设计图先确定适配的核心设备。

①第一种情况：设计图为640px

        设计图640px 考虑dpr 为2

        640px / 2 == 320px 

        视口的宽 320px

        100vw == 320px

        1vw == 3.2px

        31.25vw == 100px;

②第二种情况：设计图为750px;

        设计图为750px   考虑dpr为2

        750px / 2 == 375px;

        视口的宽 375px;

        100vw == 375px;

        1vw = 3.75px;

        26.67vw == 100px;

注：如果设计图为640px  html的font-size值为31.25vw;

       如果设计图为750px  html的font-size值为26.67vw;