響應式設計：根據不一樣設備引不一樣css樣式

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

body{
    background-color: #fff;
}
@media screen and (max-width: 600px) {
     body{
         background-color: #ccc;
     }
 } 

上面表示的是：當屏幕小於或等於600px時，背景色顯示成灰色。

body{
    background-color: #fff;
}
@media screen and (min-width: 900px) {
     body{
         background-color: #ccc;
     }
 } 

上面表示的是：當屏幕大於或等於900px時，背景色顯示成灰色。