对于Web开发人员来说，如果要通过对样式表进行微调来为不同尺寸设备的用户提供更好的体验，媒体查询（Media Queries）非常棒。 媒体查询实质上可以根据屏幕的尺寸来自定义网站的CSS。在你深入这篇文章之前，可以更多的了解响应式网页设计（还记得《用3个步骤实现响应式网页设计》这篇文章吗？） ，并且看看使用媒介查询的一些好例子： mediaqueri.es 。
像布拉德·弗罗斯特在以前文章中指出的一样，调整界面只是构建移动Web App时需要考虑的众多事情之一。 如果你在构建移动Web App时只通过媒介查询自定义了布局，那么我们会有以下的问题：
所有的设备都采用同样的JavaScript、CSS以及内容（图片、视频等），导致产生比预期更长的加载时间。
所有的设备都有相同的初始DOM结构，可能迫使开发人员编写过于复杂的CSS样式。
对于为每个设备指定自定义的交互来说缺乏弹性。
广州网站建设,网站建设,广州网页设计,广州网站设计
除媒介查询外，Web APP还需要更多
不要误会我的意思。我并不是讨厌通过媒介查询进行响应式设计，并绝对认为它占有一席之地。此外，上述的一些问题可以通过例如响应式图像 ，动态脚本加载等来解决。但是就某一点而言，你也许会发现自己做了太多的增量调整，而可能提供不同的版本效果会更佳。
当构建的界面在复杂性方面有所增加，同时被单页的Web App所吸引，你会想要为每个设备类型自定义用户界面做更多事情。本文将教你如何用最少的努力实现这样的自定义。通用的方法包括将访问的设备划分到正确的分类，并且为该设备提供合适的版本，同时最大限度地提高代码在版本之间的重用。
针对哪些设备类型？
现在有成千上万的互联网设备，几乎每一个都有浏览器。复杂之处在于它们的差异性：苹果笔记本，Windows工作站，有触摸输入、滚轮、键盘和语音输入的iPhone手机，iPad和Android手机，带压力传感器的设备，智能手表，烤面包机以及冰箱等等。它们无处不在，而且有些非常罕见。
各种各样的设备
为了创造良好的用户体验，你需要知道谁是你的用户以及他们使用的是什么设备。如果你为桌面用户创建了一个使用鼠标和键盘的界面，并将它展示给智能手机用户，这将是一个极大的失败，因为它设计在另一个屏幕大小和输入方式之上。
这里有两种极端的方法：
1. 创建一个为所有设备工作的版本。用户体验将因此受到影响，因为不同的设备有不同的设计考虑。
2. 为每一个要支持的设备各自创建一个版本。这个工作将永远进行下去，因为你将为你的应用构建太多版本。此外，当新的智能手机诞生（大约每周都有）时，你将被迫再次创建一个版本。
这里有一个基本的权衡：有更多的设备类别时，你可以提供更好的用户体验，但是需要做更多设计，实现和维护的工作。
为每种设备创建单独的版本对于性能原因来说也许是一个好办法，或者你想为不同的设备创建的版本差异甚巨。否则， 响应式网页设计会是完全合理的做法。
广州网站建设,网站建设,广州网页设计,广州网站设计
一个潜在的方案
这里有一个妥协方案：将设备分类，并为每个种类提供最佳体验。选择什么类别取决于你的产品和目标用户。下面是一个示例，能够很好的跨越现今流行的网络设备。
1. 小屏幕+触摸（主要是手机）
2. 大屏幕+触摸（主要是平板）
3. 大屏幕+键盘/鼠标（主要是台式机/笔记本电脑）
这只是许多可能的分类方式之一，但在写作时有很大的意义。上面的列表中缺少的是没有触摸屏的移动设备（例如功能手机，一些专用的电子书阅读器）。然而，这些设备大部分都有键盘或者屏幕阅读软件，如果你的站点精心设计，可以在上面工作良好。
