h5适配问题

手机屏幕有大小之分。比如iphone4屏幕就比iphone6plus小。这个小是指屏幕的width和height小。我们很期望当同一个网页中的一个元素,在用iphone4打开时稍微小,用iphone6plus打开时展示稍微大点。即随着屏幕大小,按比例缩放。

看似这么简单的问题,在我们开发中却很难实现。在我们早期的开发中,也有一些方案。宽度上,我们可以使用百分比来代替使用固定像素数值。而高度上,图片我们可以设置为auto,其它元素我们可以使用固定的像素。然而元素的宽度百分比值是根据父元素宽度来计算的,在我们前端完成一个布局,经常会嵌套元素。当需要去掉或者增加嵌套时,这让百分比非常难以维护。更不用讨论高度了,总之这都就是一个非常track的方案。

那到底有没有一种长度单位,它是一种相对单位,是根据屏幕比率来的呢?有, vh/vm, 1vm表示屏幕宽度的1/100,然而,兼容性问题,我们一定时间内并不能使用。于是乎就有了各种各样的适配方案。

认识 px、dp、dip、dpi、sp

认识viewport

小数像素问题

rem方案适配

viewport缩放方案

适配布局最佳实践方案