响应式设计

@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记录里可以知道操作