RWD(Responsive Web Design)自適應網站的製作方式－英傑銳網路數位設計

RWD(Responsive Web Design)自適應網站的製作方式

首先，你必須先在網站開始的地方加上以下meta語法，用於規定裝置的的結構規則：

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

其次，需將所有有圖片的地方，加上以下CSS語法，方便圖片按照螢幕寬度的自動縮放：

     img {
          height: auto;
          max-width: 100%;
      }

最後在CSS的地方加上以下規則（通常最少我們都分3個尺寸），讓不同寬度大小，給予新的不同CSS規則，就完成了：

      // Media Query ，也就是當寬度 < 768 px 時將載入下面這段 CSS :
       @media only screen and (max-width: 768px) {
           //CSS的內容
           ....
      }
      
      // Media Query ，也就是當寬度 < 480 px 時將載入下面這段 CSS :
       @media only screen and (max-width: 480px) {
           //CSS的內容
           ....
      }
      
      // Media Query ，也就是當寬度 < 320 px 時將載入下面這段 CSS :
       @media only screen and (max-width: 320px) {
           //CSS的內容
           ....
      }

你看，是不是蠻簡單的。不過在使用這項技術前，設計師必須具有一定的CSS基礎與Grid格線的概念，才更容易做出RWD的網站。