媒体查询和移动端准备工作

媒体查询：由设备类型、监测设备特性表达式构成。

语法：
        @media 设备类型[all\screen]  and (条件表达式){
            css样式
        }
    注：and两侧必须有空格
        not放在设备类型的前面（反向选择【排除某个范围】）

媒体查询：做样式微小调整
        例如：
            浮动
            显示隐藏
            文本大小
            宽高
移动端准备工作：
1： meta标签的设置：视口1：1比例、禁止用户缩放
2： Retina屏   视网膜高清显示屏
    ppi : 每英寸所显示像素点的密度 （ ppi值越高 屏幕显示越清晰 ）
    dpi : 每英寸所显示像素点的个数 
    dpr : 设备像素比例。
        dpr == 物理像素（把手机上图片截图放在ps中量取的大小） / 逻辑像素（css去设置的像素）
    dpr怎么获取：
        根据UI设计图而定：绝大部分拿到的设计图的大小  750px/640px/
        针对性对dpr进行获取：

如果设计图为640px 或者 750px 选取dpr 2
            如果设计图为大于750px    选取dpr为  3
3： 单位：
        px        %        deg        pt        em  
  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

vw      ：  视口的宽的比例  100vw == 视口宽度的100%
        vh      ：  视口高度的比例  100vh == 视口高度的100%
    vmin   :    视口的宽和高进行比较 谁小我用谁
    vmax   ：   视口的宽和高进行比较 谁大我用谁

为了方便rem的计算：
        html设置font-size的值：100px;
        1rem == 100px

出现问题：100px不会自动适配 
        找到一个能随着视口改变的单位 vw

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