web前端技術知識分享：移動端頁面重構

時間：2023-04-19 02:52:01 | 來源：網(wǎng)站運營

時間：2023-04-19 02:52:01 來源：網(wǎng)站運營

web前端技術知識分享：移動端頁面重構：Web前端技術是現(xiàn)今互聯(lián)網(wǎng)行業(yè)使用的熱門技術,隨著智能手機互聯(lián)網(wǎng)時代的高速發(fā)展,掌握好一門計算機語言能夠對現(xiàn)今社會有更理性的分析和認識。前端行業(yè)一直在網(wǎng)頁性能和網(wǎng)頁的視覺效果上存在爭議。毫無疑問移動端頁面重構就有著越來越強大的發(fā)展前景和巨大的市場，移動端頁面重構包括手機網(wǎng)站重構和微信網(wǎng)站重構。尤其是一些高端HTML5培訓課程 ，更是幫助學員提供優(yōu)質的學習服務。







移動端頁面重構是如何講授的呢？主要從以下幾點出發(fā)

第一:了解移動端頁面布局概念

1.了解html5的特點

簡易性:?可擴展性:?平臺無關性:?通用性

CSS3的特點

CSS提供了豐富的文檔樣式外觀,以及設置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果.因為有了這些特點所以我們移動端頁面布局才能更完善。

2，概念

移動端頁面布局,一個好的頁面布局能夠減少代碼量和減少CSS3屬性的重復率.所以做好布局很重要,合理安排好標簽,合理給標簽命名,樣能提高頁面的性能。首先來了解一下概念

1)什么是屏幕分辨率

屏幕分辨率是指橫縱方向上的像素點數(shù)，單位為PX。

2)什么是Viewport

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

3)什么是像素密度(PPi)

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

4)什么是DPR

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

5)，常見的移動端屏幕尺寸

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

第二，移動端頁面重構常用單位

因為要適應所有的移動端屏幕尺寸，所以傳統(tǒng)的px布局頁面在移動端就不太適用。

如何實現(xiàn)強大的屏幕適配布局，需要知道什么是rem，

1，Rem是指相對于根元素的字體大小單位，能等比例適配所有屏幕，根據(jù)變化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布局，首先來通過幾個案例來看下各自的布局有什么優(yōu)點和缺點。

1，100%布局案例

100%布局也就是我們的彈性布局，它有著自己的特點,從下圖實際案例中可以看出，無論頂部與底部的bar不管分辨率怎么變，它的寬度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標等信息都位于條目的左邊，薪資都位于右邊，這就是我們的100%布局的一個好處，它能夠充分發(fā)揮大手機的優(yōu)勢，手機越大，顯示的內容就越多。

我們再仔細觀察下面的案例可以發(fā)現(xiàn)，圖越大，它的間距就越大，字體大小也在變化，比例就會失調，這是100%彈性布局的缺點。







2.rem布局

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







Css 代碼：







通過上面的幾點，相信大家對于前端頁面重構都有了一定了解。