【HTML&CSS&JS移動端適配】移動端尺寸適配與響應式佈局相關知識

相關技術知識圖譜

百分比（流式佈局）
百分比是CSS樣式中很重要的一個單位，而在頁面佈局的層面上，在不少地方對百分比進行了應用。因爲用戶使用習慣是從上到下瀏覽，通常性質的百分比佈局一般是寬度自適應，高度不設置，默認爲auto。

• 盒子佈局寬高百分比
  • 單位爲%，基數爲瀏覽器但是區域寬度。

• 節點對象寬高百分比

  • 文字節點百分比
    • 字體大小百分比
      • 單位爲%，基數爲父容器文字大小。
  • 元素節點百分比
    • 媒體文件的響應式適配
      • 單位爲%，基數爲父容器大小。
    • HTML元素的背景適配
      • 單位爲%，基數爲所在於元素大小。
      • 特殊的參數值：
        • cover：在保持長寬比的前提下，徹底覆蓋背景區域，可能有一部分會顯示不全。
        • contain：在保持長寬比的前提下，適應背景區域，使圖片在顯示完整的前提下最大化顯示。圖片會顯示完整。但背景區域的一側可能會留白。
• 目前趨勢：衰落。

• 目前恰當使用場景：需寬（或者：寬+高）全屏的地方。例如，背景平鋪/純色、蒙層、導航條寬度，其餘全屏；

rem+mediaquery/js
rem是CSS3新增的相對長度單位。做爲相對長度單位，它只跟隨HTML根元素的字體大小變化，不受任何非HTML根元素的父元素大小影響。這使得它集相對長度單位和絕對長度單位優勢於一身。想改變使用rem的元素或者文字節點的大小，只需改變HTML根元素的文字大小便可。

• 兼容性問題
  • 兼容問題：瀏覽器IE8及更早版本不支持。因此移動端支持較好，PC端支持稍差。
  • 兼容代碼寫法：需寫一個絕對大小聲明，不支持rem的瀏覽器會自動忽略rem。

  p {font-size:14px; font-size:.875rem;}

• rem + 媒體查詢
  • 特色：非連續性的等比縮放；
  • 媒體查詢可用於可枚舉的關鍵值下的尺寸和佈局變動。而rem用於尺寸的變動。因此rem+媒體查詢可用於簡單的非連續性的可等比縮放的尺寸適配。
• rem + js
  • 特色：連續性的等比縮放；
  • js+rem可一併實現多設備的等比縮放，縮放具備連續性，不用去枚舉設備尺寸；
  • 缺點：老是須要計算（%不須要）；
  • 優勢：能夠等比例縮放（%不能夠）；
  • 代碼示例：

  未完

• 目前趨勢：流行。
• 目前恰當的使用場景：需以高寬等比例變化去適配移動頁面的元素；

媒體查詢

• 媒體查詢使用關鍵尺寸查詢來爲這些對應尺寸設置樣式（尺寸+佈局）
• 詳見 CSS媒體查詢
• 目前趨勢：平穩。
• 目前恰當使用場景：響應式佈局；

viewport+px+……

• viewport僅用於對頁面中以px爲單位的尺寸大小的縮小和放大，以拋開設備物理像素，以更溫馨的像素去顯示；
• viewport使用在幾乎任何移動頁面上，但它只能控制px的溫馨度，而不能使元素寬度在任何設備下都充滿屏幕（由於它只能讓1px在手機上有更合適的大小，可是每一個手機的寬度不同，寬的就不能充滿）。因此viewport一般智能處理px的部分，還需配合相對長度單位去作元素等比縮放的適配。
• 獲取比值：window.devicePixelRatio；
• 獲取ideal viewport：document.documentElement.clientWidth；
• 詳見 viewport詳解
• 目前趨勢：平穩。
• 目前恰當的使用場景： 同一元素在大小屏幕上大小一致，佔比不一樣的現實需求。例如文字大小。

相關框架

• boosttrap、妹子UI柵格佈局。

技術對比與總結

A. 移動頁面尺寸縮放與適配的技術

技術名稱	描 述	依賴尺寸單位	依賴基數	須要配合屏幕尺寸捕捉	適應設備獨立像素	不受父元素大小影響	瀏覽器等比縮放（用於塊元素）	還原設計圖	用於字體
流式佈局	根據父元素百分比	%	父元素尺寸	不須要（侷限）	不支持	不支持	不支持長寬比例不變	差	不溫馨
vw/vh	根據屏幕百分比	vw/vh	屏幕寬度	不須要	不支持	支持	支持，無需計算	須要換算	不溫馨
rem	根據根字體大小	rem	根字體大小（px/vw/em）	須要	不支持	支持	支持，須要計算	須要換算	不溫馨
px	定死大小	px	devicePixelRatio	須要	不支持	支持	不支持	直接使用	溫馨
em	根據父元素字體大小	em	父元素字體大小（px/vw/em）	須要	不支持	不支持	不支持	須要換算	不溫馨

B. 移動屏幕尺寸捕捉與響應式佈局的技術

技術名稱	描述	可調整尺寸範圍	是否可調整局部	尺寸捕捉方法	設備獨立像素	適配全部尺寸設備	響應式佈局
viewport	優化px	僅px	不能夠	viewport的width&initial-scale屬性	適應（操做簡單）	完美支持	不支持
媒體查詢	改變佈局 特定尺寸設置	所有	能夠	@media screen and (max-width){} @import url(example.css) screen and (min-width:800px);	可適應（需特殊參數）	不支持	支持（簡單/全面）
js	經過計算 可改變尺寸&佈局 可連續變尺寸	所有	能夠	document.documentElement.clientWidth window.devicePixelRatio	適應（操做複雜）	完美支持	支持（複雜/全面）
模板引擎	JS用來改變佈局	不用來調整尺寸	能夠（佈局）	使用JS	使用JS	使用JS	支持（簡單/侷限）

C. 總結

一、rem爲如今比較流行的適配方案，與它優勢相似的有vw。它們都是CSS3中新出現的相對長度單位，vw還有配套系列例如vh等。這兩種單位，都集絕對長度單位和相對長度單位優勢於一身，可相對一個統一的標準變化。它們均可配合js進行等比變化，函數性變化或者媒體查詢變化等多種基準靈活變化（同一根值點，使用rem/vw的不一樣元素僅可對應其中一種變化，不可對它們進行區別設置。【除非用js去修改CSS中選中的個別元素的值。】），vw相對rem的優勢是：若進行基於屏幕寬度的等比變化，vw不用配合js便可使用）；
二、vw的致命缺點：兼容性相較rem低不少，瀏覽器支持性差；
三、viewport對於全部使用過哪怕一次px作單位的移動頁面都必要；
四、mediaquery屬於CSS3的新增功能，可徹底用js替代。優勢是簡單方便，不用寫JS。缺點是不能進行連續性的查詢，只能枚舉查詢關鍵值；
五、JS可配合rem/vw/%/em等相對單位進行連續性的查詢和適配，也能夠模擬媒體查詢作關鍵值查詢和適配；
六、移動端字體使用px+關鍵值查詢（mediaquery/js兩種方式）最優；
七、移動端適配方案應綜合使用各類技術：

（1）%多用在不考慮等比縮放而考慮徹底適應屏幕的地方，適合個別局部使用。好比活動頁面背景；
（2）rem通常用於等比縮放，適合大範圍局部使用（我的認爲，vw解決兼容性問題後可徹底代替rem）；
（3）px通常用於字體。與適配的思路相反，px多用於大小屏佔比需區分的地方，因此px通常不隨應配頁面變化（僅使用viewport適配到不一樣手機的獨立像素，或是使用媒體查詢作幾個關鍵值）；
（4）viewport依然用在全部要用到px的移動端頁面；
（5）頁面元素尺寸變化使用js最佳，僅考慮適配屏幕而非等比縮放的地方可直接使用%；
（6）佈局變化通常使用媒體查詢，也能夠用模板引擎；

八、移動端各狀況下適配方案：

• 適配主要從字體大小、元素尺寸、佈局安排、獨立像素比這幾個方面考慮；

（1）字體變化：px+媒體查詢；
（2）尺寸變化：

• 需等比縮放的元素：rem+js；
• 需寬（或者：寬+高）全屏。例如純色/平鋪背景圖或者蒙層：%；
  　

（3）佈局變化（響應式佈局）：媒體查詢；
（4）獨立像素比變化（任何移動端頁面）：viewport；

參考資料

【1】移動端佈局之rem https://isux.tencent.com/web-app-rem.html 【2】viewport詳解 http://www.cnblogs.com/2050/p/3877280.html 【3】media橫豎屏適配問題 http://www.genshuixue.com/i-cxy/p/8016190