響應式佈局
響應式佈局使用css3的@media這個屬性來控制的。

<style type="text/css">
body {
    background-color: #000;/*預設的背景色為heise*/
}
@media(max-width:767px){
    body{background-color: #f00;}/*頁面寬度小於767px就會變成紅色*/



/*是html5的特性 當頁面視窗大於767px時視窗顏色會由#foo的顏色變成#000的顏色*/
/* @media(min-width:767px){
    body{background-color: #f00;}
} */
 




/*在這範圍內會觸發這事件*/
/*  @media(min-width:767px) and (max-width:969px){
    body{background-color: #f00;}
} */
}
</style>

上面程式碼的意思:@media是html5的特性 當頁面視窗小於767px時視窗顏色會有預設頁面的顏色變成設定的顏色。

響應式佈局:就是按照裝置的螢幕（大小）來做出適應的調整。
以達到使用使用者的裝置，更加舒適的瀏覽頁面。