響應式

什麽是響應式布局

響應式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端（手機、平板、pc電腦、手表，電視） ——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

為什麽要有響應式布局？

• 在移動互聯日益成熟的時候，在PC端開發的網頁已經無法滿足移動設備的要求。

• 通常的做法是針對移動端單獨做一套特定的版本。

• 如果終端越來越多，那麽需要開發的版本就會越來越多（大屏設備的普及）

• 響應式布局 ：一個網站能夠兼容多個終端（節約開發成本）

優點：

面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點：

兼容各種設備工作量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

響應式開發現狀：

• 如果已經存在PC的網站了，那麽一般不會使用響應式開發，而是針對移動端再開發一套系統（比如京東、淘寶）

• 在新建站點 上采用響應式開發的越來越多。

• 在國內，響應式開發還不是特別的流行。但響應式開發是大勢所趨，會越來越流行。

響應式開發與移動web開發的比較

REM

各種布局特征的對比

由於市面上手機種類繁多，導致移動端的屏幕種類非常的混亂，比如有常見的320px 360px 375px 384px 480px 640px等。在開發中，美工一般只會提供750px或者是640px的設計稿，這就要求我們通過一張設計稿能夠適配所有的屏幕。

通常解決方案如下：

• 流式布局：可以讓各種屏幕都適配，只是在大屏幕中顯示效果不是非常的友好, 即使這樣, 由於開發效率高, 成本低, 目前使用流式布局的公司還是非常多的，比如 亞馬遜

  、京東 、攜程

• 響應式布局：國內很少有大型網站使用，主要原因是工作大，可維護性不好 。所以一般都是中小型的門戶或者博客類站點會采用響應式，因為這樣可以節約成本。

• rem布局：rem能夠實現寬高自適應的布局方式， 目前使用rem布局的有：淘寶 、 蘇寧

rem是什麽？

rem（font size of the root element）是指相對於根元素的字體大小的單位。它是一個相對單位。

em（font size of the element）是指相對於當前元素的字體大小的單位。它也是一個相對單位。

html{
  font-size:16px;
}
body {
  font-size:20px;
}
div.em {
  /*em的計算方式參照的當前元素的font-size，如果不設置，默認繼承自父盒子*/
  width:2em;
  height:2em;
  background-color:red;
}
/*rem的計算方式參照的是html的font-size*/
div.rem {
  width:2rem;
  height:2rem;
  background-color:blue;
}

rem與響應式

因為rem的基準點是根元素html的字體大小，因此我們只需要設置不同屏幕的html的font-size大小不一樣就可以達到不同屏幕的適配了。

rem與媒體查詢

使用rem配合媒體查詢可以適配多個終端

    @media (min-width: 320px) {
      html {
        /*font-size: 100/750 * 320px*/
        font-size: 42.67px;
      }
    }
    @media (min-width: 375px) {
      html {
        font-size: 50px;;
      }
    }
    @media (min-width: 414px) {
      html {
        font-size: 55.2px;;
      }
    }
    @media (min-width: 480px) {
      html {
        font-size: 64px;;
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 85.33px;
      }
    }
    @media (min-width: 750px) {
      html {
        font-size: 100px;;
      }
    }

優點：使用媒體查詢適配，速度快。

缺點：適配多個終端時，需要添加響應的代碼。

rem與javascript

通過javascript獲取可視區的寬度，計算font-size的值，也可以適配多個終端。

var base = 100;
var design = 750;
?
function responsive() {
  var pageWidth = window.innerWidth;
?
  if ( pageWidth <= 320 ) {
    pageWidth = 320;
  }
?
  if ( pageWidth >= 750 ) {
    pageWidth = 750;
  }
?
  var size = base / design * pageWidth;
  document.documentElement.style.fontSize = size + "px";
}
?
responsive();
window.addEventListener("resize", responsive);

優點：直接適配所有的終端

缺點：必須在頁面加載之前設置html的font-size值，不然會出現文字大小調動的情況。

淺析響應式布局，rem布局,媒體查詢布局