@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;/*避免图片被拉大到超过图片实际大小而失真*/ }
原文：http://www.cnblogs.com/zuoxiaobing/p/4671895.html