響應(yīng)式布局原理
第一步：Meta標(biāo)簽
大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在標(biāo)簽里加入這個meta標(biāo)簽。<meta name="viewport" content="width=device-width, initial-scale=1
user-scalable=no">

第二步：HTML結(jié)構(gòu)
由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素，更多都是百分比操作，這一條非常重要。
字體也不能使用絕對大小(px)，而只能使用相對大小(em)。

第三步：媒體查詢-Media Queries
CSS3 Media Query-媒體查詢是響應(yīng)式設(shè)計的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
媒體查詢的目的在于為指定的視圖寬度指定不同的CSS規(guī)則，來實現(xiàn)不同的布局。媒體查詢可以寫在同一個或者單獨的樣式表中。

IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。

HTML中的條件注釋:
<!--[if lt IE 9]>
 <script src="https://cdn.staticfile.org/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>
 <![endif]-->

一、響應(yīng)式布局

實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式，通過響應(yīng)式設(shè)計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。

優(yōu)點:
  面對不同分辨率設(shè)備靈活性強; 
  能夠快捷解決多設(shè)備顯示適應(yīng)問題;
缺點:
  兼容各種設(shè)備工作量大，效率低下;
  代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長;
  其實這是一種折中性質(zhì)的設(shè)計解決方案，多方面因素影響而達(dá)不到最佳效果;
  一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況;

如何實現(xiàn)響應(yīng)式布局?
通過CSS3中的Media Query（媒體查詢），對應(yīng)不同屏幕大小，使用不同的樣式操作；

二、viewport視口

  例如: 瀏覽器是相框，照片要放到相框中，照片比較大的時，照片就是進行縮放操作，但整體內(nèi)容也縮放了；另外，照片要打印到相片紙中，再將其放入到相框中；
  PC端，要顯示圖片，是直接將圖片渲染到瀏覽器窗口中；
  移動端，要顯示圖片，不是直接渲染到瀏覽器窗口中的，而是渲染在虛擬區(qū)域中即是viewpot；（移動端比PC端多了一層viewport，即可以通過設(shè)置viewport來控制整體頁面的顯示）

• viewport的概念
  移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的區(qū)域。用來顯示網(wǎng)頁的那部分區(qū)域，但viewport可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。默認(rèn)情況下，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，默認(rèn)的viewport設(shè)為980px或1024px(值由設(shè)備自己決定的)。瀏覽器可視區(qū)域的寬度是比這個默認(rèn)的viewport的寬度要小，所以出現(xiàn)橫向滾動條。

• css中的1px并不等于設(shè)備的1px
  在css中我們一般px作為單位，在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素。可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。
  實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
  iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。
  還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。

• 利用meta標(biāo)簽對viewport進行控制
  最常見的操作即是: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放。
  meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設(shè)備的viewport問題。

  - width: 設(shè)置layout viewport  的寬度，為一個正整數(shù)，或字符串"width=device-width"(設(shè)備寬度)
  - initial-scale: 設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)
  - minimum-scale: 允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)
  - maximum-scale: 允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù)
  - height: 設(shè)置layout viewport  的高度，這個屬性對我們并不重要，很少使用
  - user-scalable: 否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

三、媒體查詢

媒體查詢可用于檢測很多事情:

  - viewport(視窗) 的寬度與高度
  - 設(shè)備的寬度與高度
  - 朝向 (智能手機橫屏，豎屏)
  - 分辨率

• 媒體查詢語法

 // 表達(dá)式根據(jù)條件是否成立返回 true 或 false
@media not|only mediatype and (expressions) {
    CSS-Code;
}

  - not: not是用來排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）;
  - only: 用來定某種特別的媒體類型。對于支持Media Queries的移動設(shè)備來說，如果存在only關(guān)鍵字，移動設(shè)備的Web瀏覽器會忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件。對于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時會忽略這個樣式文件;
  - all: 所有設(shè)備，這個應(yīng)該經(jīng)常看到

• 多媒體類型

  - all: 用于所有多媒體類型設(shè)備
  - print: 用于打印機
  - screen: 用于電腦屏幕，平板，智能手機等
  - speech: 用于屏幕閱讀器

• 根據(jù)屏幕不同，引入不同的樣式表

  <!-- 屏幕在1000px以上的-->
  <link href="a.css" rel="stylesheet" media="screen and (min-width: 1000px)" />

  <!-- 屏幕是在600px~1000px-->
  <link href="b.css" rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 1000px)" />

  <!-- 屏幕是在小于400px的-->
  <link href="c.css" rel="stylesheet" media="screen and (max-width: 400px)" />

• 通過媒體查詢，添加不同樣式

  // 屏幕最小寬度是1000px
  @media screen and (min-width: 1000px) {
    div {
      width: 1000px;
      height: 50px;
      margin: 10px auto;
      color: white;
    }
  }

  // 屏幕最小寬度是400px，最大是1000px
@media screen and (min-width: 400px) and (max-width: 1000px){
    div {
      width: 50%;
      height: 50px;
      margin: 10px auto;
      color: white;
    }
  }