移动端适配：

    单位：em rem % px
    视口：
        布局视口
        视觉视口
        不同设备的默认视口不一样，苹果系列一般是980.
        视口的缩放比：
            缩放比=设备宽度/视口宽度  390/980=0.4
            100px===>>100*0.4=40
        产生的问题：css中的px != 设备显示的px
    
    修改了header要重新运行
    viewport:   视口，配置视口.
    width:      视口宽度=dvice-width（设备宽度），不设置是，不同设备的默认视口不一样.
    inicil-scale:    缩放比.不配置视口，缩放比默认是设备宽度/视口
    maximum-scale:   最大缩放比.优先级高于inicial-scale
    minimum-scale:   最小缩放比.
    user-scale:yes/no 1/0  设置是否允许用户缩放.

媒体查询：

    媒体:手机/平板/电脑屏幕    screen.打印机（print）
    作用:当屏幕宽度在某些范围时，样式的变化
    
    写法:       @media 媒体/all(所有媒体)
    关键字:     @media mediatype and|not|only (media feature)
                and  并且  
                not  非
                only （基本不用）
    媒体特性：
                width 宽度
                min-width  最小宽度
                max-width  最大宽度
    vw.宽 vh.高   view width(视口宽度)   view height(视口高度)
    0~100   vw.vh 百分比