關(guān)于移動(dòng)端的適配方案,現(xiàn)在其實(shí)已經(jīng)有很多了,什么百分比、font-size+rem、視窗單位(vw、vh)等等,在介紹懶適配之前,先說(shuō)說(shuō)我常用的百分比吧。
百分比布局
元素的size:頁(yè)面上的元素的width都使用百分比來(lái)實(shí)現(xiàn),比如一行三列,每列就是33.33%,高度可以基于padding-bottom來(lái)實(shí)現(xiàn),也可以讓內(nèi)部元素來(lái)支撐,這個(gè)主要看需求。
字體大?。哼@個(gè)一般使用px,根據(jù)設(shè)計(jì)圖來(lái)進(jìn)行修改,最小12px
整體頁(yè)面:設(shè)置一個(gè)max-width,然后居中顯示
上面差不多就是百分比布局的一些要點(diǎn),這其中有關(guān)size的都需要根據(jù)設(shè)計(jì)圖來(lái)縮放,計(jì)算量還是挺大的,主要是太麻煩。。
靈感來(lái)源
懶適配的靈感來(lái)源是看了淘寶的適配方案,使用viewport來(lái)對(duì)頁(yè)面進(jìn)行縮放,但淘寶的適配不僅僅依賴于此,在這里就不展開了。
viewport
<meta name="viewport"