這篇文章主要介紹“Web移動(dòng)端頁(yè)面重構(gòu)的方法是什么”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Web移動(dòng)端頁(yè)面重構(gòu)的方法是什么”文章能幫助大家解決問題。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、云安網(wǎng)站維護(hù)、網(wǎng)站推廣。首先我們了解一些關(guān)于移動(dòng)端布局的一些概念。
什么是移動(dòng)端頁(yè)面布局？
移動(dòng)端頁(yè)面布局，一個(gè)好的頁(yè)面布局能夠減少代碼量和減少CSS3屬性的重復(fù)率。所以做好布局很重要，合理安排好標(biāo)簽，合理給標(biāo)簽命名，樣能提高頁(yè)面的性能。
什么是Viewport？
就是瀏覽器，用來顯示網(wǎng)頁(yè)的那一部分區(qū)域，也就是說瀏覽器的實(shí)際寬度是和我們手機(jī)的寬度不一樣的，無論你的手機(jī)寬度是320PX還是640PX，在手機(jī)內(nèi)部的寬度，始終會(huì)是瀏覽器本身的Viewport。
什么是像素密度(PPI)？
屏幕上每英寸可以顯示像素點(diǎn)的數(shù)量，單位是PPI，屏幕像素密度與屏幕尺寸以及分辨率有關(guān)，屏幕尺寸越小，分辨率越高。
什么是DPR？
設(shè)備的物理像素和邏輯像素的對(duì)應(yīng)關(guān)系，即物理像素/邏輯像示，默認(rèn)縮放為100%的情況下，設(shè)備像素和CSS像素的比值。
常見的移動(dòng)端屏幕尺寸
3.5英寸，3.7英寸，4.2英寸，4.7英寸，5.0英寸，5.5 英寸，6.0英寸，這是我們移動(dòng)端頁(yè)面重構(gòu)最基本的概念。
移動(dòng)端頁(yè)面重構(gòu)常用單位
因?yàn)橐m應(yīng)所有的移動(dòng)端屏幕尺寸，所以傳統(tǒng)的px布局頁(yè)面在移動(dòng)端就不太適用。
如何實(shí)現(xiàn)強(qiáng)大的屏幕適配布局，需要知道什么是rem。
1，Rem是指相對(duì)于根元素的字體大小單位，能等比例適配所有屏幕，根據(jù)變化html也就是根元素的字體大小來控制rem的大小，
JS計(jì)算：通過獲取視口的寬度/實(shí)際設(shè)計(jì)圖的寬度*html的font-size
2，CSS3新增單位 VW，VH
VW:視窗寬度，1VW等于視窗寬度的百分之一
VH:視窗高度，1VW等于視窗高度的百分之一
我們也可以把VW轉(zhuǎn)換成PX賦值給font-size，
元素所展示的大小(設(shè)計(jì)圖固定大小)=(VW*設(shè)計(jì)稿寬度)/100
VW = 元素所展示的大小(設(shè)計(jì)圖固定大小)*100/設(shè)計(jì)稿寬度
VW，VH是CSS3新增的單位，它只能有著自己的兼容性，IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持。
實(shí)例解析
移動(dòng)端常用布局方式有100%布局，rem布局以及VW布局，首先來通過幾個(gè)案例來看下各自的布局有什么優(yōu)點(diǎn)和缺點(diǎn)。
1、100%布局案例
100%布局也就是我們的彈性布局，它有著自己的特點(diǎn),從下圖實(shí)際案例中可以看出，無論頂部與底部的bar不管分辨率怎么變，它的寬度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標(biāo)等信息都位于條目的左邊，薪資都位于右邊，這就是我們的100%布局的一個(gè)好處，它能夠充分發(fā)揮大手機(jī)的優(yōu)勢(shì)，手機(jī)越大，顯示的內(nèi)容就越多。
我們?cè)僮屑?xì)觀察下面的案例可以發(fā)現(xiàn)，圖越大，它的間距就越大，字體大小也在變化，比例就會(huì)失調(diào)，這是100%彈性布局的缺點(diǎn)。
2、rem布局
Rem布局就是等比縮放布局，從下面案例中分析可以看得出，不管是放在iphone5, iphone6, 或者iphone6Plus中，它們都是等比例縮放的，圖片要大都大，要小都小，這就是rem布局頁(yè)面的特點(diǎn)，它是我們最常用的移動(dòng)端頁(yè)面布局方式，當(dāng)然我們也可以用css3新增的VW來布局。
Css 代碼：
關(guān)于“Web移動(dòng)端頁(yè)面重構(gòu)的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
重慶分公司
重慶分公司
