最近在做一些手機端微場景，發現處理各種手機螢幕解析度是個很讓人頭疼的事情，最終找到了乙個處理效果比較滿意的方案。各位客觀請往下看：
如果有過做微場景經歷的客官們應該都了解，在**中給乙個元素的寬高設成定值，那麼在不同解析度的手機上可能會出現不同的布局，更甚者會出現滾動條。
我們用iphone5和ipnohe6 plus來舉例：
iphone5 的螢幕解析度是 320*568 ，我們在行內定義乙個320*568的div，類名為resize，讓它相對於手機螢幕（body）絕對定位，背景設為橙色
css的**：
我們可以看到，div充滿了整個螢幕並且沒有橫向和豎向的滾動條
iphone6 plus 的螢幕解析度是 414*736，大家肯定知道，div此時是肯定不能充滿整個螢幕的，效果是這樣的：
那如果我們想要讓div在兩種解析度的手機上都充滿整個螢幕，要怎麼做？解決方法如下：
以在iphone5手機端布局為例
由於我們獲取的是標籤的行內樣式，所以在給resize定義一系列屬性時，都要寫在行內喲！
這個方法的核心思想就是，螢幕變大多少倍，元素的寬和高也等比例的放大多少倍。由於手機端解析度相差都不大。所以當我們在布局裡有一些的話，雖然會有輕微的變形，但是影響不大。
小弟初來乍到，第一次寫部落格，有什麼不足和錯誤的地方，希望各位看觀老爺們諒解。
移動端h5框架自適應 移動h5自適應布局
轉 問題一，解析度resolution適配 不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。問題二，單位英吋畫素數ppi適配 使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。問題三，裝置畫素比...
H5移動頁面自適應
1 使用meta標籤 viewport h5移動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。viewport 是使用者網頁的可視區域。翻譯為中文可以叫做 視區 手機瀏覽器是把頁面放在乙個虛擬的 ...
移動h5自適應布局
問題一，解析度resolution適配 不同螢幕寬度，html元素寬高比和字型大小，元素之間的距離自適應，使用rem單位。問題二，單位英吋畫素數ppi適配 使用rem單位，文字會發虛。段落文字，使用px單位，用media query或js來適配。標題文字可以直接使用rem單位。問題三，裝置畫素比例d...