媒体查询&rem布局

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

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

媒体查询：做样式微小调整
    例如：
        浮动
        显示隐藏
        文本大小
        宽高

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

Retina屏 视网膜高清显示屏

ppi : 每英寸所显示像素点的密度 （ ppi值越高 屏幕显示越清晰 ）
dpi : 每英寸所显示像素点的个数 

dpr : 设备像素比例。
    dpr == 物理像素（把手机上图片截图放在ps中量取的大小） / 逻辑像素（css去设置的像素）
dpr怎么获取：
    根据UI设计图而定：绝大部分拿到的设计图的大小  750px/640px/
    针对性对dpr进行获取：
        如果设计图为640px 或者 750px 选取dpr 2
        如果设计图为大于750px    选取dpr为  3

单位：

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

< html{
font-size不是为了设置文字大小。为了给rem提供一个大小的比例
font-size:100px;
为了方便自己计算:把font-size的值设置成100px 1rem == 100px
} >

计算流程：
    假如：设计图为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
下面需要研究的问题： 100px == ? vw  
100px == ?vw

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

第一种情况：设计图为640px
    设计图640px 考虑dpr 为2
    640px / 2 == 320px 
    视口的宽 320px
    100vw == 320px
    1vw == 3.2px
    ?vw == 100px
    31.25vw == 100px;
第二种情况：设计图为750px;
    设计图为750px   考虑dpr为2
    750px / 2 == 375px;
    视口的宽 375px;
    100vw == 375px;
    1vw = 3.75px;
    ?vw == 100px;
    26.67vw == 100px;


记住： 
    如果设计图为640px  html的font-size值为31.25vw;
    如果设计图为750px  html的font-size值为26.67vw;
    
vw结合rem 计算流程 :
    量出设计图header的height  为88px
    考虑dpr 为 2
    88px / 2 == 44px
    44px 转成rem
    44px / 100px == 0.44rem;