针对大部分智能手机的媒体查询答案

【问题标题】：Media query to target most of smartphone针对大部分智能手机的媒体查询
【发布时间】：2012-12-22 21:24:24
【问题描述】：

我编写了一些 CSS 代码来使 HTML 页面更适合移动浏览器。为了确保我的 CSS 仅适用于手机，我使用以下媒体查询：

@media only screen and (max-device-width: 480px)

作为一名 iPhone 开发人员，我在这款设备上进行了测试，它运行良好。但我希望我的 CSS 能够在所有类型的设备（Android、Windows Phone 等）上使用。

什么是适合当今大多数智能手机的好分辨率？还是我需要更复杂的媒体查询？

【问题讨论】：

去看看这里的可用分辨率(Click me)
查看这个答案以获得类似的信息：stackoverflow.com/a/7354648/1861603
@LeeMeador 这是一个非常好的工具！谢谢。
@Omega 谢谢你的链接。我看到了这个问题，但我觉得答案更多是面向 iPhone 的，而不是面向智能手机的。我通常只为 iPhone 开发，但这次不是。

标签： css mobile media-queries

【解决方案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),

请注意，他们的名称中没有提及设备、屏幕尺寸或方向。 “平板电脑肖像” 的尺寸对我们来说并不重要，因为我们应该尝试让事物响应式并且在任何屏幕尺寸上看起来都不错，而不仅仅是 自适应到几种屏幕尺寸。

是的，了解最常见的屏幕尺寸并避免疯狂的媒体查询很重要，但最终，您的设计可能会开始要求调整为 530 像素而不是 480 像素或类似的东西。那为什么不呢？

现在，根据我的个人喜好：我一直牢记媒体查询，但起初我倾向于几乎完全忽略设备尺寸。我也更喜欢 desktop-first 方法，因为我发现将布局调整为更小的尺寸更容易（即：从页面中删除不那么重要的内容、减小尺寸等）。

原答案

有些人倾向于完全忽略设备尺寸。他们说你应该检查你的布局开始中断的地方，只有在必要时才创建媒体查询。其他人将检查不同的设备尺寸，就像您现在所做的那样。但随后您将有一个 320 像素的媒体查询，另一个 480 像素的媒体查询，依此类推……您可能会为此发疯，根据您的布局，甚至可能没有必要！

所以，目前我正在尝试两者兼而有之。一开始我倾向于忽略设备尺寸，并且仅在必要时（当布局中断时）创建一些媒体查询，直到它看起来适合 960 像素和更大的尺寸，以及更小的屏幕尺寸，比如 320 像素（我关心的最小设备尺寸大约）。

【讨论】：

我真的很喜欢这样的想法，即我应该专注于我的页面内容，而不是阅读我内容的设备的大小。这甚至可以解决未来设备的问题！
是的。既然我读了马里奥的回答，我要补充的另一件事是，我还阅读了有关 Mobile First 想法的内容，但这对我来说没有多大意义。也许我只需要阅读更多关于它的内容并自己尝试一下，但是在设计方面，我认为将东西缩小（比如隐藏不太重要的东西）会更容易适应；更大的受众通常来自台式机（以及未来更大的分辨率手机）；那我为什么要从手机开始呢？这是个人观点，但移动优先的想法对我来说看起来“尴尬”，我愿意用一些好的论据来改变它=）

【解决方案2】：

最近我开始使用响应式网页设计和媒体查询，我没有找到一个独特的“神奇”查询，但是在阅读了很多文章和几本书之后，我采用了移动优先的方式来开发网页，我正在使用一些常见的媒体查询，这里是断点：

320 像素手机人像
480 像素移动横屏
600 px 小平板
768 px 平板电脑纵向
1024 像素平板电脑横向/上网本
1280 像素及以上 - 桌面

（取自http://fluidbaselinegrid.com/）

希望对你有帮助

【讨论】：

谢谢！你知道 Galaxy S3 是否会接受 480px 的查询吗？它是 720 像素宽，所以可能不是？
欢迎您，在我的测试中我发现（总是使用）Galaxy S3 有 360px 纵向, 和 640 像素（或 720 像素，抱歉记不清了）横向。您可以尝试使用媒体查询来定位许多设备，但是，在我看来，一旦定义了断点，最好使用灵活的布局来尝试覆盖所有设备，例如，如果您有一个灵活的布局，直到 480px ，它也适合 360 像素。
确实如此。在我看来，让你的布局灵活也是最好的选择，但在我看来，这也有点违背移动优先的想法和使用固定屏幕尺寸。如果您要使您的设计灵活，那么如果“布局”在这些尺寸上没有“中断”（同时是灵活的布局），那么使用 320、480、600 和 768 之类的固定中断是没有意义的。我们有一些标准要遵循，是的，但是如果布局仅在 530 像素处开始中断怎么办？为什么要关心 600px？
@7th 是的，但灵活也与断点兼容，因为也许您想根据可用的 with 更改布局结构，例如，在 480px 下可能更好 1 列布局，但在 480px 和 728px 之间有足够的空间来制作 2 列布局。当然，600px 可能是粗心的，至少每个开发人员都必须评估每个项目并尝试定义最佳选项。