移动端布局的三种方法

一、固定高度,宽度自适应

首先设置width=device-width,然后根据320作为满屏尺寸,(320是iphone4和iphone5的理想尺寸),换算设计稿的尺寸。比如设计稿的满屏尺寸为640,其中一个图片的宽度是50px,那么它在实际设置中就应该设置为25px。 其它元素水平方向混合使用定值和百分比,或者使用flex布局。

二、固定宽度,viewport缩放

设置width为稿子满屏宽度即可。浏览器会自动进行缩放。
某些安卓和ios的webview会缩放失效需要设置initial-scale。
但是实测这个方法在低版本安卓里会碰到许多坑。

三、根据设备宽度,设置rem

假如设计稿的尺寸是750px,我们把屏幕分成十等份,一等分为75px。 浏览器的宽度为800,同样分为十等份,一份为80px,然后将html的font-size设置为80px,那么1rem就等于80px,也就是屏幕的宽度的十分之一。在设计稿中一个div的宽度为100px,那么在设备上应该表现为106.7px。因为现在1rem在设备与稿子里都是十分之一的宽度,所以100 /( 750/10) = 0.133rem在两个地方都代表相同的百分比。
所以这个方法的关键就是根据浏览器尺寸设置html的font-size,然后计算每个元素的尺寸rem。
淘宝还会根据物理像素和独立像素之比,缩放页面,以保证固定值1px的准确。
这种方法在安卓中可能会出现文本超出viewport的问题,解决方法是设置文本的宽度为一个定值。