Responsive_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的網站。

CSS Grid System 與 CSS Fluid Grid System 網頁版面

Grid 這個字有「格」的意思,沒錯,Gird System 就是把網頁變成有規則性大小的格子,我們以 Bootstrap 的 Grid System 來看,總共有 12 種欄寬,從大到小都有。我們就可以直接使用 Grid 網格系統,能讓開發過程變得很快。

1

部分文章出處:http://fundesigner.net/responsive-web-design-explain/

延伸閱讀:RWD (Responsive Web Design) 自適應網站的簡單介紹

英傑銳網路數位有限公司:Responsive Web Design 專業的RWD自適應網站製作公司

arrow
arrow

    英傑銳數位設計 發表在 痞客邦 留言(1) 人氣()