響應式設計

@media screen and (min-width:800px) and (max-width:1060px){
    li{
    font-size:10em;
    }
}

意味着，在屏幕上(而不是打印機)而且當最小像素爲800，最大像素爲1060時應用括號內的樣式

由於css(層疊樣式表)後面的規則會覆蓋前面的，因此通用的規則須要寫在媒體查詢前面

元素的大小使用百分比，計算公式是：目標元素寬度÷上下文元素寬度(瀏覽器寬度或父元素寬度)=百分比寬度

如：

@media screen and (min-width:800px) and (max-width:1080px){
    body{
    font-size:5px;
    width:96%;/*960÷1000*/
    }
    li{
    font-size:10em;
    width:97.9166667%;//*940÷960*/
    }
}

使用em而不是使用px來設置字體大小，這樣作的好處是設置body或其餘父元素的font-size:8px（或更小時），子元素的字體大小會自動更改;
圖片的設置使用百分比

如

img{
    width:18.75%;/*180÷960*/
    max-width:180px;/*避免圖片被拉大到超過圖片實際大小而失真*/
    }

 自適應圖片，爲不一樣屏幕提供不一樣大小的圖片，例如在手機上提供尺寸較小的圖片，而在電腦上提供較大的圖片，以減小請求圖片所消耗的帶寬

demo見

http://git.oschina.net/zuoxiaobing/Adaptive-Images--demo

從commit記錄裏能夠知道操做