CSS之響應式布局

    響應式布局，相信大家都有一定的了解，響應式布局是今年很流行的一個設計理念，隨着移動互聯網的盛行，為解決如今各式各樣的瀏覽器分辨率以及不同移動設備的顯示效果，設計師提出了響應式布局的設計方案。今天就和大家來講講響應式布局這件小事，包含什么是響應式布局、響應式布局的優點和缺點以及響應式布局該怎么設計（通過CSS3MediaQuery實現響應布局）。

  響應式布局的優點：

       面對不同分辨率設備靈活性強,  能夠快捷解決多設備顯示適應問題,根據不同的顯示器調整設計最適合用戶瀏覽習慣的頁面

  響應式布局的缺點：

       兼容各種設備工作量大，效率低下。代碼累贅，會出現隱藏無用的元素，加載時間加長其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果，一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

  響應式布局的運用方法：

1.media query: 
通過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件

2.語法結構及用法: 

@media 設備名 only (選取條件) not (選取條件) and(設備選取條件)，設備二 {sRules}

(1)在link中使用@media:

 

<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">

(2)在樣式表中內嵌@media：

@media  screen and (min-width: 600px) {
     .one{
        border:1px solid red;
        height:100px;
        width:100px;
     }
    
  }

       通過上面代碼可知：它是通過@media媒介查詢判斷來執行的CSS樣式，也就是說：如果我要做一個響應式布局網站，同時兼容手機、平板、PC的話就得寫三個與之對應的CSS樣式，通過@media媒介查詢來完成響應式布局。

值得注意的是：在手機設備上，我們要禁止用戶來縮放屏幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網站效果。

禁止代碼如下：<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>  加在頭部標簽里

在響應市布局中我學的也是不太深所以這需要借鑒以下-->10個免費的響應式布局HTML5+CSS3模板http://www.html5cn.org/article-6799-1.html