響應式網頁

• 響應式網頁可以根據設備的不同，以及特性的不同，而自動改變布局、大小等。

• 響應式網頁的特征：
  1）流式網格布局
  2）可伸縮的圖片和字體
  3）CSS3 Media Query

• 優缺點

  • 優點：可以自動適配PC/PAD/PHONE瀏覽器屏幕
  • 缺點：代碼變復雜，需要考慮更多的兼容性，并不適合內容非常多的網頁

響應式網頁測試

• 真實物理設備
  • 優點：測試結構真實可靠
  • 缺點：測試任務量太大
• 第三方軟件
  • 優點：無需添置真實設備
  • 缺點：軟件測試效率低，部分功能無法測試，測試結果有待進一步驗證
• 使用瀏覽器模擬器測試
  • 優點：測試功能大，簡單易用
  • 缺點：測試結果有待進一步驗證

響應式布局必須要清除的兩個概念：viewport、CSS3 Media Query

• viewport：用于顯示網頁內容的一個邏輯概念，其高度和寬度可以任意制定，網頁不是顯示在物理窗口上，而是顯示在視口中，這樣就可以實現網頁不經縮放

    viewport用法：<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
  
    viewport可以指定如下屬性：
        width：視口的寬度，可以取值為數值，或者device-width
        height：視口的高度，一般不指定
        initial-scale：初始時的縮放倍率
              minimum-scale：允許的最小縮放倍率
              maximum-scale：允許的最大縮放倍率
              user-scalable：允許用戶手動縮放，可取值1/0/yes/no
  

• CSS3 Media Query:根據客戶端瀏覽設備的特性，有選擇的執行部分css

  1) 作用：根據客戶端瀏覽設備的特性，有選擇的執行部分css
  
  2) media: 指瀏覽網頁的設備，如screen
  
  3) Query: 查詢出當前瀏覽設備的特性，如類型、寬度、高度、分辨率、色彩、方向(landscape/portrait)
  
  4) css3MediaQuery有兩種用法
  
     根據媒體的特性，加載不同的外部css
  
       <link media="screen and (min-width:990px)and(max-width:1500px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
  
       不足：客戶端會不管媒體特性，請求所有的css文件
  
     根據媒體的特性，執行某段css中的部分內容
  
       @media screen and (min-width: 990px) {}
  

如何編寫響應式網頁

• 在head標簽中，聲明viewport元標簽, 使網頁的視口和瀏覽器的寬高保持一致

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

• 根據瀏覽器的不同，加載不同的css文件
  <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="smallScreen.css" />

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

• 同一個css文件中，也根據不同的屏幕分辨率，選擇應用不同的css規則

     @media screen and (max-device-width: 400px) {
      　.column {
    　　　　　　float: none;
    　　　　　　width:auto;
    　　　}
          #sidebar {
    　　　　　　display:none;
    　　　}
    }
    @media screen and (max-device-width:600px){
          .column{
                    float:left;
                     width:auto;
                  }
          #sidebar{
                  display:block;
                 }
         }