為什麽麽要響應式？

因為能兼容，手機、平板、PC終端既省錢又省力；

有很多網站的解決辦法是，為不同的設備提供不同的mobile版本，或者iPhone/iPad版本。這樣效果有保證，但是比較麻煩，同時要維護好幾個版本；

於是，“”“一次設計，普遍適用”，根據屏幕寬度，自動調整布局（layout）

第一步： meta:vp標簽

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

上面代碼的意思是。

viewport是網頁默認的寬度高度

 content="width=device-width 網頁寬度默認屏幕寬度 user-scalable=no,（禁止縮放） initial-scale=1.0,（原始縮放比例） maximum-scale=1.0, minimum-scale=1.0"（最大最小縮放比例）

所有主流都支持，對於IE6-8適用

　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]
 
-->

第二部：不使用絕對寬度

由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度，也不能使用具有絕對寬度的元素。（重點）

第三部：相對大小字體

使用rem,em對字體進行設置;

rem相對根元素中的fontSize

html{
   font-size:100px;  //設置根元素上的100px=1rem;
}

p{
   width:1rem;       //100px
}

em,相對上級元素

html{
      font-size: 100%;  //默認是瀏覽器默認16px=1em||rem
  }

h1{
         font-size: 1em; //1em=16px
     
 
}

  p{
            font-size: 2em;  //2em=32px
            margin-top: 1em;//你以為是16px，搓搓，此時1em=32px;被自己重置了
        }

怎麽選擇em,rem？？？

如果這個元素有其他屬性與自身字體有關聯，使用em,剩余使用rem

例子

  html{
      font-size: 100%;  //1rem||em=16px
  }
  .tit{
      font-size: 1em;       //=16px
      padding: 1em;         //=16px
  }
  .titH1{
            font-size: 1em;  //1em=16px
        }
  .titH2{
      font-size: 2em;       //2em=32px=>1em=32px  所以 padding:32px
  }
  .titH3{
      font-size: 3em;       //3em=48px=>1em=>48px  所以padding:48px
  }

<h1 class="tit titH1">我是H1</h1>
<h2 class="tit titH2">我是H2</h2>
<h2 class="tit titH3">我是H3</h2>

所有這個元素中與em相關的尺寸全部改變;

rem則任何尺寸都不進行改變

  html{
      font-size: 100%;//1rem=16px
  }
  .tit{
      font-size: 1rem; //1rem=16px
      padding: 1rem;  //16px
  }
  .titH1{
            font-size: 1rem; //16px
        }
  .titH2{
      font-size: 2rem;  //16px  padding=16px
  }
  .titH3{
      font-size: 3rem;   16px   padding=16px
  }

第四部：流動布局

　.main {
　　　　float: right;
　　　　width: 70%;
　　}

　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

裝不下會自動跑到下面去，絕對定位的使用一定要小心；

第五部：css加載media

<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

//上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。

　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

//如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

第六部：媒體查詢media

@media screen and (max-device-width: 400px) {

　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}
//如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節

第七部：圖片響應式

　　img { max-width: 100%;}
//老版本IE使用
　　img { width: 100%; }

不過，有條件的話，最好還是根據不同大小的屏幕，加載不同分辨率的圖片。太累了，沒條件；

轉紫阮一峰響應式布局

REM響應式布局