關于移動端的適配方案,現(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"