我写了一些CSS代码，使HTML页面更适合在移动浏览器。 可以肯定的是我的CSS仅适用于手机，我用下面的媒体查询：
@media only screen and (max-device-width: 480px)
作为一个iPhone开发者，我测试了这个设备上，它的作品真的很好。 但我想我的CSS应用到所有类型的设备（安卓，Windows手机等）的使用。
这将是一个很好的解决，将适合的，这些天的智能手机的最？ 或者我需要一个更复杂的媒体查询？
Answer 1:
更新：火星2016
项目都是不同的，所以很难设定一个全球性规则，将适合他们。 如果你正在寻找一个，这里是有人比我聪明想出了和我以前用过的一个例子：
xsmall: (max-width: 479px),
small: (max-width: 599px),
medium: (max-width: 767px),
large: (max-width: 1024px),
largeOnly: (min-width: 768px) and (max-width: 1024px),
xxl: (min-width: 1200px),
tall: (min-height: 780px),
注意缺少的设备，屏幕尺寸或方向上自己的名字引用。 一个“平板电脑画像”的大小真的不应该对我们非常重要，我们应该尽量让事情敏感和好看任意屏幕大小，不能简单地适应了几个屏幕尺寸。
是的，它知道最常见的屏幕尺寸和避免疯狂的媒体查询是很重要的，但最终，你的设计可能会开始在530px而不是480像素或类似的东西，以乞求的调整。 那么，为什么不呢？
现在，就我个人的喜好 ：我一直在媒体查询记住所有的时间，但一开始我倾向于几乎完全忽略了设备的尺寸。 我也喜欢桌面第一种方法，因为我觉得它更容易进行调整布局，以更小的尺寸（即：从页面移除不那么重要的事情，减少大小等）。
原来的答案
有些人往往完全忽视了设备的尺寸。 他们说，你应该检查您的布局开始打破，只有必要时才创建媒体查询。 其他人会检查不同的设备大小，因为你现在做的事情。 但随后你将有一个媒体查询320像素，另一个为480像素，等等......你可以去疯狂的是，也许这取决于你的布局甚至不是必要的！
所以，现在我想两者都做。 我往往会忽略在第一器件尺寸，并会创建一些媒体查询只在必要时（当布局中断），直到它看起来好像960像素和更大的尺寸，还可以用于更小的屏幕尺寸，如320像素（我关心的最小器件尺寸关于）。
Answer 2:
最近，我开始采用自适应网页设计与传媒查询工作，我没有找到一个独特的“魔力”的查询，但在阅读了大量的文章和几本书后，我已经通过了开发网页的移动第一种方式和我使用一些常见的媒体查询，这里的断点：
- 320像素移动肖像
- 480像素流动的风景
- 600像素的小片
- 768像素的平板肖像
- 1024 PX平板景观/上网本
- 1280像素及更大 - 桌面
（来自http://fluidbaselinegrid.com/ ）
希望能帮助到你
文章来源: Media query to target most of smartphone
