Web移動端頁面重構的方法是什么

這篇文章主要介紹“Web移動端頁面重構的方法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Web移動端頁面重構的方法是什么”文章能幫助大家解決問題。

　　首先我們了解一些關于移動端布局的一些概念。

　　什么是移動端頁面布局？
　　移動端頁面布局，一個好的頁面布局能夠減少代碼量和減少CSS3屬性的重復率。所以做好布局很重要，合理安排好標簽，合理給標簽命名，樣能提高頁面的性能。

　　什么是Viewport？
　　就是瀏覽器，用來顯示網頁的那一部分區域，也就是說瀏覽器的實際寬度是和我們手機的寬度不一樣的，無論你的手機寬度是320PX還是640PX，在手機內部的寬度，始終會是瀏覽器本身的Viewport。

　　什么是像素密度(PPI)？
　　屏幕上每英寸可以顯示像素點的數量，單位是PPI，屏幕像素密度與屏幕尺寸以及分辨率有關，屏幕尺寸越小，分辨率越高。

　　什么是DPR？
　　設備的物理像素和邏輯像素的對應關系，即物理像素/邏輯像示，默認縮放為100%的情況下，設備像素和CSS像素的比值。

　　常見的移動端屏幕尺寸
　　3.5英寸，3.7英寸，4.2英寸，4.7英寸，5.0英寸，5.5 英寸，6.0英寸，這是我們移動端頁面重構最基本的概念。

　　移動端頁面重構常用單位

　　因為要適應所有的移動端屏幕尺寸，所以傳統的px布局頁面在移動端就不太適用。
　　如何實現強大的屏幕適配布局，需要知道什么是rem。

　　1，Rem是指相對于根元素的字體大小單位，能等比例適配所有屏幕，根據變化html也就是根元素的字體大小來控制rem的大小，
　　JS計算：通過獲取視口的寬度/實際設計圖的寬度*html的font-size

　　2，CSS3新增單位 VW，VH
　　VW:視窗寬度，1VW等于視窗寬度的百分之一
　　VH:視窗高度，1VW等于視窗高度的百分之一
　　我們也可以把VW轉換成PX賦值給font-size，
　　元素所展示的大小(設計圖固定大小)=(VW*設計稿寬度)/100
　　VW = 元素所展示的大小(設計圖固定大小)*100/設計稿寬度
　　VW，VH是CSS3新增的單位，它只能有著自己的兼容性，IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持。

　　實例解析
　　移動端常用布局方式有100%布局，rem布局以及VW布局，首先來通過幾個案例來看下各自的布局有什么優點和缺點。

　　1、100%布局案例
　　100%布局也就是我們的彈性布局，它有著自己的特點,從下圖實際案例中可以看出，無論頂部與底部的bar不管分辨率怎么變，它的寬度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標等信息都位于條目的左邊，薪資都位于右邊，這就是我們的100%布局的一個好處，它能夠充分發揮大手機的優勢，手機越大，顯示的內容就越多。
　　我們再仔細觀察下面的案例可以發現，圖越大，它的間距就越大，字體大小也在變化，比例就會失調，這是100%彈性布局的缺點。

　　2、rem布局
　　Rem布局就是等比縮放布局，從下面案例中分析可以看得出，不管是放在iphone5, iphone6, 或者iphone6Plus中，它們都是等比例縮放的，圖片要大都大，要小都小，這就是rem布局頁面的特點，它是我們最常用的移動端頁面布局方式，當然我們也可以用css3新增的VW來布局。

　　Css 代碼：

關于“Web移動端頁面重構的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。