媒体查询和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