移動端的那些事

標籤：

常見方式：

　　固定寬度(320)做法：這樣前端倒是爽了，可是大頁面兩邊有留白，小頁面表徵圖文字又會縮的很小，使用者體驗極其不好。

　　流式布局：其實就是用%，這樣寬度倒還差不多，高度怎麼搞？所以這種布局一般都是高度寫死，顯的很不協調，另外對設計也有很大的限制，另外還有相容性方面的問題。

　　響應式布局：說白了就是利用CSS3中的Media Query（媒介查詢），喊的很火，誰用誰知道，簡直累死人不要命。

　　設定viewport進行縮放：以320寬度為基準，進行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以相容iphone6 plus的螢幕了。

　　<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

 

幾個術語：

　　PPI：單位英寸像素數，現實世界的一英寸內像素數，決定了螢幕的顯示品質

　　DPR：裝置像素比率，物理像素與邏輯像素（px）的對應關係

　　Resolution：螢幕地區的寬高所佔的像素數

 

REM等比例適配所有螢幕：通過一段js根據瀏覽器當前的解析度改變根節點font-size的值

解析度Resolution適配：

　　不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。

單位英寸像素數PPI適配：

　　使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。

裝置像素比例DPR適配：

　　根據devicePixelRatio來修改meta標籤的scale

 

詳情參見：春華秋實

 

扯了那麼多，其實我實際項目中是怎麼做的呢？一句代碼解決所有需求：

@media (max-width: 320px){    html{ font-size: 3.125%; }}@for $i from 320 through 640 {    @media (width:#{$i}px){html{font-size: $i/102.4 * 1%}}}@media (min-width: 640px){    html{ font-size: 6.25%; }}

說明：在640px的設計稿上，只需把測量到的所有px換成rem，例如測到的10px寫到項目中就是10rem，其它尺寸設計稿修改一下即可。

 

移動端的那些事