這篇文章主要介紹“Web移動(dòng)端頁(yè)面重構(gòu)的方法是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Web移動(dòng)端頁(yè)面重構(gòu)的方法是什么”文章能幫助大家解決問(wèn)題。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(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？
　　就是瀏覽器，用來(lái)顯示網(wǎng)頁(yè)的那一部分區(qū)域，也就是說(shuō)瀏覽器的實(shí)際寬度是和我們手機(jī)的寬度不一樣的，無(wú)論你的手機(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像素的比值。

　　常見(jiàn)的移動(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也就是根元素的字體大小來(lái)控制rem的大小，
　　JS計(jì)算：通過(guò)獲取視口的寬度/實(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布局，首先來(lái)通過(guò)幾個(gè)案例來(lái)看下各自的布局有什么優(yōu)點(diǎn)和缺點(diǎn)。

　　1、100%布局案例
　　100%布局也就是我們的彈性布局，它有著自己的特點(diǎn),從下圖實(shí)際案例中可以看出，無(wú)論頂部與底部的bar不管分辨率怎么變，它的寬度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標(biāo)等信息都位于條目的左邊，薪資都位于右邊，這就是我們的100%布局的一個(gè)好處，它能夠充分發(fā)揮大手機(jī)的優(yōu)勢(shì)，手機(jī)越大，顯示的內(nèi)容就越多。
　　我們?cè)僮屑?xì)觀(guān)察下面的案例可以發(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來(lái)布局。

　　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)。

文章名稱(chēng)：Web移動(dòng)端頁(yè)面重構(gòu)的方法是什么-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.rwnh.cn/article6/cseiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、自適應(yīng)網(wǎng)站、定制網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站策劃、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)