好程式員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個像素點。
一般以縱向像素橫向像素表示 一個手機的螢幕分辨率。如：19601080
這裡的一個像素是指實體裝置的一個像素點。
四、什麼是螢幕像素密度？
螢幕像素密度：螢幕上每英寸可以顯示像素點的數量，機關是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
例：裝置的分辨率為6401136，邏輯像素為320568 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實作等比例縮放布局。