首先說乙個很有意思的問題：一塊720p的螢幕和1080p的螢幕那個大？
這個問題很有代表性，如果手機豎著放，720p=720px*1280px,而1080p=1080px*1920px;那麼在寬度上，前者是720個畫素，後者是1080個畫素，後者一定比前者大嗎？
答案是否定的，後者不一定比前者大，還可能和前者一樣大，甚至比前者小。
這裡需要搞清楚乙個概念，畫素點只有個數的問題，沒有大小的問題。那什麼才和大小有關呢？是邏輯解析度（pt）,我們來看一張**：
型號螢幕尺寸（inch）
邏輯解析度（point）
render
物理解析度（pixel）
畫素密度（ppi）
iphone3gs
3.5320 * 480
@1x320 * 480
163iphone4/4s
3.5320 * 480
@2x640 * 960
326iphone5/5s
4320 * 568
@2x640 * 1136
326iphone6/6s
4.7375 * 667
@2x750 * 1334
326iphone6plus/6s plus
5.5414 * 736
@3x1242 * 2208
401其實我們可以這麼理解：螢幕尺寸決定邏輯解析度，它們之間是有對應關係的，但是這個換算關係涉及到螢幕的柵格渲染，較為複雜。所謂邏輯解析度，就是乙個物理長度的單位。而這裡的render指的是每個pt中包含幾個px。比如iphone3gs和iphone4s，實際尺寸都是3.5英吋，即都是320pt*480pt，但是由於在4s中每個pt可以包含2個px了，所以顯示更加細膩了。
一句話就講明白了：邏輯解析度決定螢幕尺寸，物理解析度指向顯示細膩程度。
為什麼是指向呢？因為細膩程度（ppi）是這樣計算的：
這樣就很明白了。
那麼小程式開發中，這一塊最有意思的是，它在設計rpx這玩意的時候，完完全全就是以iphone6為模板的。在且只在iphone6中，1px=1rpx=0.5pt。
也就是說，對於一張設計稿，只要物理解析度和iphone6保持一致，為750px*1334px,按照1:1的換算關係在小程式中寫成rpx，那麼這個布局和比例在任何裝置顯示都是一致的。
因為使用rpx，小程式會自動在不同解析度的裝置中進行自適應轉換，而使用px就不會。
移動端不同解析度適配 使用flexible
使用方法 lib flexible庫的使用方法非常的簡單，只需要在web頁面的中新增對應的flexible css.js,flexible.js檔案 或者直接載入阿里cdn的檔案 容器或元件寬高主要使用單位rem，字型大小則不變仍然使用單位px。還有乙個約束是，如果針對iphone5 640 113...
用rem在移動端不同解析度下的完美顯示
rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em font size of the element 是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴...
關於Html5移動端適配不同解析度的布局總結
關於現在比較流行的一些框架比如bootstrap，用得多的人會發現bootstrap確實在做扁平化風格的 方面，提供了很大的便利，適配不同解析度的pc端，包括能適配到移動端。但是就我個人而言，從pc端適配到移動端這種一整套的方式還是有所不妥的，畢竟pc端顯示的內容相對於移動端來說是很多很繁瑣的，而移...