其他分享
首页 > 其他分享> > 媒体查询和rem的计算

媒体查询和rem的计算

作者:互联网

移动端

媒体查询

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

    语法:
        @media 设备类型[all\screen]  and (条件表达式){
            css样式
        }


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

标签:dpr,媒体,100px,vw,设计图,750px,查询,width,rem
来源: https://www.cnblogs.com/msx-hanquan/p/12748129.html