好程式設計師web前端技術分享移動端頁面佈局

好程式設計師 web 前端技術分享 移動端頁面佈局

一、 彈性佈局（ 100% 佈局）的特點

頂部與底部的 bar 不管解析度怎麼變，它的⾼度和位置都不變；  中間每條招聘資訊不管解析度怎麼變，招聘公司的圖示等資訊 都位於條目的左邊，薪資都位於右邊 .

特點：關鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對於這類 app ，記住一個開發原則就好：文字流式，控制元件彈性，圖片等比縮放

二、 什麼是螢幕尺寸？

移動端螢幕尺寸 : 螢幕對角線的長度，單位是英寸 (1 英寸 =2.54 釐米 ) 。

常見的尺寸有： 2.4 ， 2.8 ， 3.5 ， 3.7 ， 4.2 ， 5.0 ， 5.5 ， 6.0

 

三、 什麼是螢幕解析度？

螢幕解析度：指橫縱方向上的畫素點數，單位為 px,1px=1 個畫素點。

一般以縱向畫素 * 橫向畫素表示 一個手機的螢幕解析度。如： 1960*1080

這裡的一個畫素是指物理裝置的一個畫素點。

 

四、 什麼是螢幕畫素密度？

 

螢幕畫素密度：螢幕上每英寸可以顯示畫素點的數量，單位是 ppi(pixels  per inch) 縮寫。

螢幕畫素密度與螢幕尺寸，螢幕解析度有關，在單一條件下，螢幕尺寸越小，解析度越高，畫素密度越大，反之越小。

iphone3GS 和 iphone4 區別：螢幕尺寸一樣，螢幕解析度相差一倍，螢幕畫素密度也相差一倍。

PX: 畫素，將顯示器分成非常細小的方格，每一個方格就是 1px 。

注 :( 網頁重構中使用的 px 和螢幕解析度的 px 不一定是一樣的大小 ) 。

實際上畫素分為兩種：裝置畫素和邏輯畫素（ CSS 畫素）

DPR ：裝置畫素比 DPR(devicePixelRatio) 是預設縮放為 100% 的情況下，裝置畫素和 CSS 畫素的比值

在早先的移動裝置中，並沒有 DPR 的概念。隨著技術的發展，移動裝置的螢幕畫素密度越來越高。從 iphone4 開始蘋果公司推出了所謂的 retina 視網膜螢幕。之所以叫做視網膜螢幕，是因為螢幕的 PPI( 螢幕畫素密度 ) 太高，人的視網膜無法分辨出螢幕上的畫素點。 iphone4 的解析度提高了一倍，但螢幕尺寸卻沒有變化，這意味著同樣大小的螢幕上，畫素多了一倍，於是 DPR = 2

五、 等比縮放佈局（ rem 佈局）

1.rem 是什麼 ?

rem(font size of the root element) 是指相對於根元素的字型大小的單位。

 

2. 為什麼 web app 要使用 rem ？

實現強大的螢幕適配佈局 ( 淘寶 , 騰訊 , 網易等網站都是 rem 佈局適配 )rem 能等比例適配所有螢幕 , 根據變化 html 的字型大小來控制 rem 的大小 ,

六、 vw   vh

vw ： viewpoint width ，視窗寬度， 1vw 等於視窗寬度的 1% 。

vh ： viewpoint height ，視窗高度， 1vh 等於視窗高度的 1% 。

vmin ： vw 和 vh 中較小的那個。

vmax ： vw 和 vh 中較大的那個。

vw, vh, vmin, vmax ： IE9+ 區域性支援， chrome/firefox/safari/opera 支援， iOS safari 8+ 支援， Android browser4.4+ 支援， chrome for android39 支援

 

七、 Rem 配合 VW 做等比縮放佈局

1.rem

rem 是指相對於根元素的字型大小的單位。

2. 根元素

如果根元素是相對裝置尺寸自動變換。

3.VW

視窗寬度， 1vw 等於視窗寬度的 1% 。

4.VW 轉換成 PX 賦值給 font-size

例：裝置的解析度為 640*1136 ，邏輯畫素為 320*568     1VW=3.2px

Font-size:100px; 轉換成 VW    font-size:31.25vw;

1rem=31.25vw 可一起結合寫等比例縮放佈局。

 

八、 100% 佈局（彈性佈局）

實現方案：採用 PX 方式，藉助彈性盒實現。

 

九、 等比例縮放佈局（ rem 佈局）

1.html{font-size:31.25vw （可變 : 設計稿） ;}

31.25vw=100px(50px 或 100px 為基準單位（好算） )/3.2px

3.2px=320( 視口寬度） /100(1vw 等於視窗寬度的 1% 。 )

元素大小（ rem ） = 原圖量尺寸 /dpr/100 （ 50px 、 100px 為基準單位（好算））

 

2 ，用媒體查詢設定 html 的 font-size 配合 rem （設定判斷條件的節點）

 

3, 透過 JS 動態設定 html 的 font-size 同樣元素單位也要配合 rem 實現等比例縮放佈局。