我编写了一些CSS代码，使HTML页面更适合移动浏览器。为了确保我的CSS仅适用于手机，我使用以下媒体查询：
@media only screen and (max-device-width: 480px)
作为iPhone开发人员，我在此设备上进行了测试，效果非常好。但我希望我的CSS可用于所有类型的设备（Android，Windows Phone等）。
适合当今大多数智能手机的最佳解决方案是什么？或者我需要更复杂的媒体查询？
答案 0 :(得分：11)
最近我开始使用响应式网页设计和媒体查询，我没有找到一个独特的魔法＆＃34;查询，但在阅读了大量文章和几本书后，我采用了Mobile First方式开发网页，我使用了一些常见的媒体查询，这里是断点：
（取自http://fluidbaselinegrid.com/）
希望有所帮助
答案 1 :(得分：8)
更新：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而不是480px或类似的情况下进行调整。那为什么不呢？
现在，根据我的个人偏好：我始终牢记媒体查询，但起初我倾向于几乎完全忽略设备尺寸。我也更喜欢桌面优先方法，因为我发现将布局调整为更小的尺寸更容易（例如：从页面中移除不那么重要的东西，减小尺寸等）。
原始答案
有些人倾向于完全忽略设备尺寸。他们说您应该检查布局开始中断的位置，并仅在必要时创建媒体查询。其他人将检查您正在进行的不同设备尺寸。但是你会有一个320px的媒体查询，另一个480px的媒体查询等等......你可能会对此发疯，也许根据你的布局甚至不需要它！
所以，现在我正试图做到这两点。我倾向于首先忽略设备大小，并且仅在必要时（布局中断时）创建一些媒体查询，直到它看起来像960px和更大的尺寸，以及更小的屏幕尺寸，如320px（我关心的最小设备尺寸）约）。