DPR:
物理像素/设备独立像素 这个比值就是DPR
如:iphone6 物理像素是750 设备独立像素是375
那么:750/375 = 2 iphone6的DPR是2
二倍图:
现在,有一张100px x 100px的图片,在DPR = 1.0的设备中,可以完美的显示。
在iphone3G中,此图片背后的发光点有100 x 100个
当我们把它(100px x 100px的图片)放在DPR = 2.0的设备中,它背后对应的发光点有多少个?
答: 在DPR=2的设备中,此图片背后的发光点有200 x 200个。此时,这张图片就会变的模糊。
如何让它不模糊?
答: 如果把这张100px x 100px的图片,再做一张200 x 200的图片,图片的内容是一样。
如果我把200 x 200的图片,放到DPR=2的设备中,此图片背后的发光点有400 x 400个。
如果说把图片手动调整成100 x 100px,相当于,你把图片缩小了,实际上,图片还是200 x 200px。
再说一遍,图片的质量还是200 x 200,只是手动的缩小了成了100 x 100,那此图片背后的发光点有
200 x 200.
在DPR = 1.0设备中,显示一个100 x 100的图片,直接使用原图,此图背后的发光点有100 x 100
在DPR = 2.0设备中,需要使用200 x 200的图片,还需要手动缩小成100 x 100,此时背后的发光点有200 x 200
在DPR = 3.0设备中,需要使用300 x 300的图片,还需要手动缩小成100 x 100,此时背后的发光点有300 x 300
图片有三张:1倍图,如logo.png 二倍图, 如logo@2x.png 三倍图, 如logo@3x.png
REM:
px:一个盒子是100px * 100px px指的是逻辑像素
em: 一个汉字的宽度。2em表示两个汉字的宽度
rem:说到rem,通常指适配。
利用媒体查询去设置样式:
@media only screen and (width: 320px){
div{
/* 在iphone5中,正好撑满 */
font-size: 32px;
}
}
em:表示一个汉字的宽度。
1em = 1个font-size。
如:font-size是20px, 1em = 20px 10em = 200px
em的不足,它是相对于父元素的font-size来说的。
由于em需要找父元素,不适配做适配。
rem: r表示root root是根的 rem就不需要父元素,只需要html标签。
1rem = html标签中的font-size的大小。
如:html标签的font-size = 34px;
计算:
1rem = 34px
2rem = 68px
3rem = 102px
1em = 父标签中的font-size的大小。
需要利用媒体查询 + rem适配: 看好好的步骤
1)得到的设计搞是750px
2)通常我会把浏览器的模拟器调整750px
3)严格按照设计搞,以rem为单位,把设计搞还原了来。
4)开始写样式了,需要确定html的font-size,通常我会定为100px。 叫确定rem的基准值。
有一个盒子widht是20px,1rem = 100px,盒子是20px,换算成rem是0.2rem
又有一个盒子widht是55px,换成rem是0.55rem
说白了,量设计搞,量出来的尺寸,除于100就是rem单位。
到此,不要管其它屏,不要管其它屏,在750这个屏中,还原设计搞。
5)把刚才写好的页面,迁移到其它屏上,完成适配。此时就需要借助手媒体查询了。
开始换算:
在750的屏中,html的font-size是100px。
在375的屏中,html的font-size是50px。
在320的屏中,html的font-size是320/750 * 100 = 42.666666666666666666px
在414的屏中,html的font-size是414/750 * 100 = 55.2px
不使用媒体查询,使用JS把750的页面迁移到其它屏:
<script>
(function(w){
let docEle = w.document.documentElement;
let timer = null;
// docEle.clientWidth 一屏的宽度
function refresh(){
let width = docEle.getBoundingClientRect().width; // 一屏的宽度
if(width > 750){
width = 750
}
let fs = width / 7.5
document.querySelector("html").style.fontSize = fs + "px";
}
// refresh();
w.addEventListener("resize",()=>{
// console.log("resize"); 防抖
timer && clearTimeout(timer)
timer = setTimeout(refresh, 400)
})
w.addEventListener("pageshow",()=>{
// console.log("resize"); 防抖
timer && clearTimeout(timer)
timer = setTimeout(refresh, 400)
})
})(window)
</script>