Follow Fang!: Responsive Web Design

2013/08/28

Responsive Web Design

RWD源自於Ethan Marcotte 在他在 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。
是參考這篇文章的說法，『Responsive Web Design (RWD) 和 Adaptive Web Design (AWD)』

中文大概就是自適應，應該也沒有更好得翻譯了吧XD

RWD就是基於目前的螢幕大小尺寸不一以及行動裝置的新起，所以才演變而來的。
根據螢幕大小的解析度去調整介面，該方法也是透過CSS3的media去實現的

以下會有一個範例程式碼，會根據瀏覽器大小做相對應的配置

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>RWD Demo</title>
    <link href="test.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <h1>Header</h1>
    </header>
  </body>
</html>

CSS：

@media screen and (max-width: 1440px) { 
 header{
  background-color: red;
 }
}

@media screen and (max-width: 800px){ 
 header{
  background-color: blue;
 }
}

@media screen and (max-width: 500px) { 
 header{
  background-color: green;
 }
}

我筆電螢幕最大就是1440*900