http://www.99jianzhu.com
现在试图解决Android平板的屏幕分辨率问题，目前主要想到的办法是采用响应式设计和媒体查询，发现无论使用那种方式，工作量都很大，调试都困难，悲催啊。
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大，但是自从苹果和安卓的风靡之后，移动平台上的web开发变得越来越流行了，同时CSS的媒体查询可谓派上了大用场了。
以下为翻译内容，原文来自这里 非常棒的一篇文章
关于CSS media queries想了解更多，参看这里
如何使用Media Queries媒体查询:
媒体查询就像是一个CSS选择器或者如果你接触过数据库的话，就像是SQL查询语句。媒体查询实际上就是一种语法规
则，可以方便的从一大堆元素里获取几个元素。这样就方便你应对一些特定的尺寸或者指定一些特殊的解决方案了。媒体
查询的代码可以放在<head>元素里，也可以放在styleSheet样式表里的任何地方。但是需要注意的是，在任何时候，媒体查
询都必须以关键字media开头，后面跟你要显示的css样式。
（一）放在head标签中的写法如下：
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
（二）放在styleSheet样式表的写法如下：
@media only screen and (max-device-width:480px){/*css样式*/}
【注意事项】：上面的两种写法都是针对老版iphone的解决方案（320x480的解决方案）。当然，不是说让你两个都用，
只要挑选适合你需求的那个写法来用就可以了 。
利用媒体查询来覆盖CSS样式
这个用法在移动设备上和常用，主要是用来呈现高清图的。也就是说，现在我们有一张两倍于显示尺寸的图片，但可显示的区域只有图片的一半。解决方式就是利用上面说的媒体查询和background-size来实现。
下面主要介绍以下的几种设备的解决方案：
（一）iOS 设备
1. iPhone 4
iPhone4上你就不能使用device-height或者device-width来设置媒体查询的条件，因为iPhone4的屏幕大小也是320x480的，跟老版本的iPhone和iPod是一样的。iPhone 4上的像素密集程度是两倍于我们视网膜的呈现的，所
www.99jianzhu.com/包含内容：建筑图纸、PDF/word/ppt 流程，表格，案例，最新,免费下载,施工方案、工程书籍、建筑论文、合同表格、标准规范、CAD图纸等内容。