響應式布局
簡而言之，就是頁面元素的位置隨著螢幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被「壓縮」的空間。
如上圖，其實就相當於頁面被壓矮了。
cover布局
就跟background-size的cover屬性一樣，保持頁面的寬高比，取寬或高之中的較小者佔滿螢幕，超出的內容會被隱藏。此布局適用於主要內容集中在中部，邊沿無重要內容的設計。
如上圖，第一張是原設計稿，第二張把左右隱藏掉了一部分，第三張則是把上下隱藏掉了一部分。
contain布局
同樣，也跟background-size的contain屬性那樣，保持頁面的寬高比，取寬或高之中的較大者佔滿螢幕，不足的部分會用背景填充。個人比較推薦用這種方式，但在設計上需要背景為單色，或者是可平鋪的背景。
如上圖，紅框部分為原始寬高比，根據不同螢幕尺寸進行縮放，並加背景填充。
好了，接下來再說說常用的實現方法吧。
樣式縮放
最省事的適配方法，直接用px為單位按視覺進行開發，然後通過計算螢幕與網頁的寬高比，用transform:scale來對網頁進行全域性縮放。
不過此方法會有乙個小問題，就是如果網頁內有動畫的話，縮放後會稍微降低頁面效能，在低配的安卓機器上表現的比較明顯，ios上沒發現有效能問題。
rem縮放
rem是個好東西呀，誰用誰知道，這裡就不多做解釋了。原理跟上面的樣式縮放相通，只不過是通過rem為單位來進行視覺開發，然後通過計算後改變html的front-size來對頁面進行縮放。
關於以rem為單位進行開發，目前比較流行font-size=62.5%，而後1rem=10px的這種方法，有試過直接換成px也是可以的，就看個人的計算習慣吧。
移動端螢幕適配
rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...
移動端螢幕適配
方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...
vue適配不同螢幕大小 移動端適配的幾種方案
適配思路 設計稿 750 1334 開發 適配不同的手機螢幕，使其顯得合理 原則開發時方便，寫 時設定的值要和標註的 160px 相關 方案要適配大多數手機螢幕，並且無 bug 使用者體驗要好，頁面看著沒有不適感 思路寫頁面時，按照設計稿寫固定寬度，最後再統一縮放處理，在不同手機上都能用 按照設計稿...