css - 多少媒体查询？

Question

您建议使用多少媒体查询？

我做了4个设计：

960 用于横向模式（ipad 和更多类似桌面） 768 用于纵向模式 (ipad) 340 用于纵向模式 (iphone) 及以上 960

现在我的问题：

1）首先我什至不知道为什么我使用960而不是1024。我前段时间读过一些东西，因为滚动条你必须将宽度减小到960。关于平板电脑和智能手机呢？

2) 我选择这些宽度是因为我认为，如果有人使用横向模式，它会切换到“ipad-media-query”并返回到“iphone-media-query”。但这只是我的理论。我是媒体查询的新手。这就是我问的原因。感谢任何帮助，甚至是您建议的 CSS 代码示例，以便为网站提供最多的媒体查询！？

3）我只想覆盖大多数平板电脑、智能手机、台式机等，以受最佳媒体查询大小的影响。我非常感谢您的“最佳解决方案”！

score 6 · Accepted Answer

一段绳子有多长？

有多少媒体查询适合使用以及如何实现它们，这完全取决于您和您的设计。

作为指南，我建议查看 Twitter Bootstrap 如何实现他们的媒体查询。他们已经对其进行了大量研究以得出他们的数字，因此这将是一个很好的起点。

score 2 · Accepted Answer

尝试识别断点是个坏主意。在响应式网站中设置断点的主要原因是为了保持最佳体验。您不想为每个新设备或分辨率引入新的媒体查询。

score 2 · Accepted Answer

根据需要使用尽可能多的媒体查询。你可能会避免使用太多，因为你不想要一个巨大的 CSS 文件。但这不会显着减慢网站的速度。如果您组织好您的媒体查询并为每个查询使用最小和最大宽度，那么跟踪您的代码将非常容易。

如果需要，您可以对每个设备的每个方向使用一个媒体查询。当然，理想情况下，您希望使用零媒体查询，并制作一个完美变形的完美网站。但这不会发生，除非您的网站非常简单。

我使用 9 个媒体查询。

如果您可以扩大分辨率参数并摆脱一些媒体查询，那就更好了。

score 1 · Accepted Answer

使用媒体查询：240 x 320（移动）、320 x 480（移动）、480 x 640（小型平板电脑）、768 x 1024（平板电脑 - 纵向）、1024 x 768（平板电脑 - 横向）

考虑低于 320 像素的宽度是一个非常好的做法，但对于那些非常关注每个访问者的人来说。

score 0 · Accepted Answer

我会使用不需要媒体查询的动态布局。

只需使用媒体查询来隐藏/移动元素。

你可以使用任意数量的它们。只需在您的页面中放置一些 javascript 以显示您当前的浏览器宽度，然后调整浏览器大小以测试何时隐藏元素。为我工作

score 0 · Accepted Answer

最新的设计世界需要响应式设计。

请参阅此示例并使用您想要的所有媒体查询：http: //nmsdvid.com/snippets/

6 回答 6