一、 彈性布局(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實現等比例縮放布局。

移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。

CSS如何判斷橫屏豎屏

豎屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

橫屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代碼

@media screen and (orientation: portrait) { 
 /*豎屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*橫屏 css*/ 
} 

JS判斷橫屏豎屏方法