媒体查询、mate标签设定 rem vw

媒体查询：由设备类型、检测设备特性表达式构成
语法：@media 设备类型【all/screen】 and（条件表达式）{css表达样式}
注：and两侧必须有空格 not放在设备类型的前面
例如：@media all and （min-width：1024px） and （max-width：1200px）{
body{
background：orange；
}
}
@media all and （min-width：750px） and （max-width：1023px）{
body{
background：red；
}
}
meta标签的设置：视口1：1比例、禁止用户缩放

        dpr：设备像素比例
           dpr=物理像素/逻辑像素
        dpr获取方式：根据ui设计图而定：绝大部分拿到的设计图的大小  750px/640px
                   如果设计图为640px或者750px选取dpr  2
                   如果设计图大于750px  选取dpr  3
        rem：rem相对大小：相对于html的font-size的值而定  默认  1rem=16px
             rem布局（等比缩放）
        计算流程：假如：设计图为750px  dpr为2  ps量出一个元素为88px  设置css为88px除以dpr2=44px   以为html中font-size：100px；1rem=100px；  44px换成rem为0.44rem
        vw：视口的宽的比例  100vw=视口宽度的100%
        vh：视口高度的比例  100vh=视口高度的100%
        vmin：视口的宽和高进行比较  谁小我用谁
        vmax：视口的宽和高进行比较  谁大我用谁
        研究100px=？vw
             第一种情况：设计图为640px   dpr为2  640px除以2=320px  那么视口百分百的宽度就是100vw=320px  1vw就是3.2px   100px就是31.25vw
             第二种情况：设计图为750px   dpr为2  750px除以2=375px  那么视口百分百的百度就是100vw=375px  1vw就是3.75px  100px就是26.67px