之前写过一篇移动端适配的文章,很长,内容太多,看得容易凌乱,重新写个通熟易懂版的。
为什么要自适应?
比如,对于一个移动端页面,设计师给的视觉稿画布宽 750,视觉稿中的一个黄色区块的尺寸是 702 x 300,并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样,根据布局视口宽度等比缩放。
在移动端我们一般会设置布局视口宽度=设备宽度,即内容呈现的区域在设备屏幕内。
但不同设备的宽度不同,因而让布局视口的宽度也不同。比如 iPhone 6 的布局视口宽度为 375, iPhone6 Plus 布局视口的宽度为 414。
对于给定的画布宽 750 的视觉稿,如果在布局视口宽度为 375 的 iPhone 6 设备上呈现,我们可以将视觉稿中元素的像素值除以 2,代码如下:
.box{
width: 351px;
height: 150px;
margin-top: 40px;
background: #F5A623;
}
那么在 iPhone 6 中的呈现如右图,与左图视觉稿布局一致。