在PC端,1个CSS像素往往都是对应着电脑屏幕的1个物理像素。
而在移动端,由于retina视网膜屏幕的出现,逻辑像素和物理像素不再只是1:1,所以要适应不同尺寸的设备,需要比pc端多做适配方案。
- 百分比+固定高度适配
.box{ overflow:hidden //形成bfc,浮动参与计算 } .item{ height:40px; width:25%; box-sizing:border-box; border:1px solid #09a; float:left }
水平也可以弹性布局 - rem+媒体查询解决方案
媒体查询根据不同屏幕宽度改变html字体大小。1rem就等于根元素的font-size大小,再使用rem自适应适配。
@media screen and (min-320px){ html{ font-size:50px } } @media screen and (min-360px){ html{ font-size:56.25px } } @media screen and (min-400px){ html{ font-size:62.5px } } @media screen and (min-440px){ html{ font-size:68.75px } } @media screen and (min-480px){ html{ font-size:75px } } @media screen and (min-640px){ html{ font-size:100px } }
rem取值:假设设计图给出640px,让1rem=100px或者1px=1/10容易计算
chrome浏览器font-size小于12px时,会被重置为12px
毕竟媒体查询会形成间隙 - 动态监听宽度计算rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';//设计稿640
1像素场景:
设计稿给出border是1px,那么当dpr是2的时候,逻辑的1px对应的就是物理的2倍,如此,设计稿并没有充分还原。
解决:
安卓和ios8以下不适用的方法:
media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } }
伪元素缩放的方法:
.border { position: relative; width: 90vw; margin-top: 70px; margin-left: 5vw; margin-right: 5vw; } .border:before { content: ""; box-sizing: border-box; position: absolute; width: 200%; height: 200%; left: 0; top: 0; border: 1px solid #ccc; transform: scale(0.5, 0.5); transform-origin: 0 0; }