作者介紹：咔拉寶寶前端工程師，致力於首個情景式購物商城咔拉商城的前端搭建，在咔拉職場欄目作爲程序猿擔當，與讀者朋友們共同探討前端開發的那些事。

在移動端web開發，手機頁面的自適應大小，該如何解決了？

1.Viewport

在移動端用來承載網頁的這個區域，就是我們的視覺窗口，viewport（視口）,這個區域可是設置高度寬度，可是按比例放大縮小，而且能設置是否允許用戶自行縮放。

在

標籤內增加一個的標籤。

這樣就構建了一個移動的web頁面。

2.rem em vh vw %

佈局用rem em vh vw 單位可以用來進行適配，

rem 以根元素的字體大小來進行適配。

em 以父元素的字體大小來進行適配。

vh 當前屏幕可見高度的%。

vw當前屏幕可見寬度的%。

這些在一些低版本的IE就不支持了。

3.屏幕的自適應方案

自適應的方案有很多， 比如百分比佈局，彈性佈局等。

我在咔拉商城移動端，用的是響應式佈局，看上面圖片，在各個手機屏幕大小都能很好的適應。

在CSS文件裏輸入

用媒體查詢來自適應屏幕的大小，之後可以用rem單位來進行適配。

還一些其他自適應的方案，像lib-flexible，lib-flexible引入文件後，會根據屏幕的大小，動態更改根元素html的font-size的大小。也是用rem自適應的。這個方案也很好用。

查看原文 >>