響應式佈局

響應式佈局就是指一個頁面同時適應多種不同的端口

主要實現方式：  百分比自適應佈局

1.可採用媒體查詢的方式

     @media screen and (min-width:1000px){...}              對應PC端頁面

     @media screen and (max-width:1000px) and (min-width:768px) {...}        對應平板端頁面

     @media screen and (max-width:768px){...}           對應手機端頁面

 

2.採用bootstrap框架佈局

　  bootstrap框架佈局完成的頁面，是自動對應的自適應效果。

      這需要我們嚴格按照bootstrap的書寫規範，纔不會出現怪異的問題。

     寫法舉例：

      <div class="col-md-6 col-sm-6  col-xs-12">

      說明：最後的數字對應該div所佔柵欄的列數。

               col-md-6 代表在PC端上顯示在一行的6個柵欄，也就是一半。

              col-sm-6 代表在平板上也顯示div佔當前行的一半。

              col-xs-12 代表在手機端顯示爲當前行的百分之百填充。

 3. 還可以引入適配js文件，如 jquery 和專門做響應式的JS文件，均能實現自適應效果，實現響應式佈局。