关于移动端的适配方案,现在其实已经有很多了,什么百分比、font-size+rem、视窗单位(vw、vh)等等,在介绍懒适配之前,先说说我常用的百分比吧。

百分比布局

  元素的size:页面上的元素的width都使用百分比来实现,比如一行三列,每列就是33.33%,高度可以基于padding-bottom来实现,也可以让内部元素来支撑,这个主要看需求。

  字体大小:这个一般使用px,根据设计图来进行修改,最小12px

  整体页面:设置一个max-width,然后居中显示

  上面差不多就是百分比布局的一些要点,这其中有关size的都需要根据设计图来缩放,计算量还是挺大的,主要是太麻烦。。

灵感来源

  懒适配的灵感来源是看了淘宝的适配方案,使用viewport来对页面进行缩放,但淘宝的适配不仅仅依赖于此,在这里就不展开了。

viewport

  <meta name="viewport"

网友评论