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

百分比布局

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

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

  整體頁面:設(shè)置一個(gè)max-width,然后居中顯示

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

靈感來源

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

viewport

  <meta name="viewport"

網(wǎng)友評論