關于移動端的適配方案,現(xiàn)在其實已經有很多了,什么百分比、font-size+rem、視窗單位(vw、vh)等等,在介紹懶適配之前,先說說我常用的百分比吧。

百分比布局

  元素的size:頁面上的元素的width都使用百分比來實現(xiàn),比如一行三列,每列就是33.33%,高度可以基于padding-bottom來實現(xiàn),也可以讓內部元素來支撐,這個主要看需求。

  字體大小:這個一般使用px,根據(jù)設計圖來進行修改,最小12px

  整體頁面:設置一個max-width,然后居中顯示

  上面差不多就是百分比布局的一些要點,這其中有關size的都需要根據(jù)設計圖來縮放,計算量還是挺大的,主要是太麻煩。。

靈感來源

  懶適配的靈感來源是看了淘寶的適配方案,使用viewport來對頁面進行縮放,但淘寶的適配不僅僅依賴于此,在這里就不展開了。

viewport

  <meta name="viewport"

網友評論