媒体查询和rem的计算

移动端

媒体查询

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

    语法：
        @media 设备类型[allscreen]  and (条件表达式){
            css样式
        }


    注：and两侧必须有空格
        not放在设备类型的前面（反向选择【排除某个范围】）
eg(响应式布局)：
       @media all and (min-1025px){
            div{
                23%;
            }
        }
        @media all and (min-750px) and (max-1024px){
            div{
                30%;
            }
        }
        @media all and (min-320px) and (max-749px){
            div{
                45%;
            }
        }

移动端布局

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

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


    dpr怎么获取：
        根据UI设计图而定：绝大部分拿到的设计图的大小  750px/640px/
        针对性对dpr进行获取：

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

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

rem的计算

html设置font-size的值：100px;
1rem == 100px

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;