响应式设计是否有一些“最佳方法”？

Question

我需要做一个响应式网站项目，我有一些疑问。

我正在研究媒体查询，但是有很多媒体查询，我们可以遵循“默认媒体查询”或“普通媒体查询”之类的东西吗？

经过一些研究，我正在思考这个问题：

@media only screen and (min-width: 480px) { ... }
@media only screen and (min-width: 600px) { ... }
@media only screen and (min-width: 768px) { ... }
@media only screen and (min-width: 992px) { ... }
@media only screen and (min-width: 1382px) { ... }

您认为这是使用这种媒体查询的好方法吗？

对于响应式设计，您认为它在 css 中更好地使用百分比还是更好地使用像素？我问这个，因为媒体查询使用像素，所以最好不要使用百分比？

最后，我有一台全高清分辨率的电脑和其他 1024 分辨率的电脑。我有一个 300 像素的图像，在我的全高清显示器中，图像比我的 1024 计算机小。我不明白这一点，因为 300pixels 应该是 300 像素总是没有？

对不起，如果我问了很多事情，但我有一些疑问，并且很难找到关于此的好的可靠信息！

Answer 1

我认为使用您提到的媒体查询设置会使您的生活复杂化，因为它们会使定位不同的视口或窗口宽度变得困难。

@media only screen and (min-width: 480px) { ... } 将针对所有宽度为 480px 及以上，
@media only screen and (min-width : 600px) { ... } 将针对所有宽度为 600px 及以上。

因此，当视口为 600 像素或更高时，它们都会为控制权而战。您可以考虑以下内容：

/* your default, site-wide settings followed by */
@media only screen and (max-width: 480px) { ... }
@media only screen and (min-width: 481px) and (max-width: 600px) { ... }
@media only screen and (min-width: 601px) and (max-width: 768px) { ... }
@media only screen and (min-width: 769px) and (max-width: 992px) { ... }
@media only screen and (min-width: 993px) { ... }  

我并不是说这些是完美的断点，这通常是特定于您的设计的。重要的是您用于定位不同视口的技术。

像素与百分比有不同的思想流派，两者都有优势。如果您正在跟上响应式设计的步伐，我个人认为值得花时间使用一些完善的框架，例如 Bootstrap 或 Foundation 或 Skeleton 或其他许多框架之一。

它们都很棒，它们将为您节省大量学习时间，为您提供良好的跨浏览器结果，而且您​​知道的越多，在需要时就越容易摆脱它们。

祝你好运！

Answer 2

什么是像素密度以及它如何帮助我理解为什么同一张图像在我的手机上比在我的电脑显示器上小（反之亦然）？

假设我有一台分辨率为500 x 500 像素的显示器，这台显示器的屏幕尺寸对角线为 15 英寸，而我有一部分辨率相同但屏幕尺寸对角线为 4 英寸的手机（只是一个示例）。

如何在不同的屏幕尺寸下适应相同数量的像素？

答案很简单：我的手机上的像素比我的显示器上的要小（这是 Apple 的视网膜显示器和其他显示器的最大区别）。

---

媒体查询...

查看very simple blog that I've developed last year。尝试调整浏览器宽度，看看内容、图像和幻灯片会发生什么变化。

当浏览器/屏幕宽度小于 800 像素时，整个网站会发生变化以更好地适应较小的屏幕。这就是我认为您应该使用媒体查询的方式，而不是为每个设备的屏幕尺寸创建规则（但不一定使用 800px 或在大屏幕上限制内容max-width）。

_{请注意，这只是一个示例，说明您应该如何考虑媒体查询。}

Answer 3

这里有一些参考：

• 关于媒体查询，您可以阅读http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ - 我喜欢这句话

先从小屏幕开始，然后展开直到看起来像 拉屎。是时候设置断点了！ -斯蒂芬·海

基本上，您应该使用流体布局（您可以从网上找到的各种 css 流体网格中进行选择）并通过放大和缩小浏览器来测试您的设计：当您的设计“崩溃”时，是时候添加一个媒体查询了。您没有在某个断点处重新调整整个网站：一切都可以正常工作，您只需要以该特定宽度调整文本大小。这样做。

• 关于像素密度和分辨率你可以阅读这篇有用的文章：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

希望对你有帮助

Answer 4

您可能应该停止以像素和屏幕尺寸来考虑网络。

我明白为什么在设计中使用实际设备宽度作为断点很诱人，但请记住，这些断点将在新设备发布的第二秒就无效。或者当用户以意想不到的方式与网站交互时，例如根据他们的喜好调整文本大小。

1. 为您的断点使用em 单位。这样，即使用户调整文本大小，您的媒体查询也会正确触发。

2. 当你的内容/布局需要时调整你的断点，而不是针对特定的屏幕尺寸（也就是说，你可能不应该包括 980 以上的紧凑（移动）导航-ish 像素，因为使用旧显示器的人可能不知道如何浏览它）。

3. 编写移动优先CSS，就像使用min-width 进行媒体查询一样。这可以帮助您保持 CSS DRY。然而，这不意味着您永远不应该使用max-width 进行媒体查询 - 总有一些场景是您只想将样式添加到较小的屏幕。始终避免重复。

4. 为了您自己的理智，请使用 CSS 预处理器，例如 SASS、LESS 或 Stylus。我最近写了一篇关于如何使用 SASS 获得真正舒适的媒体查询工作流程的答案，click here here 阅读它。

5. 像素密度是一个复杂的话题，但渲染的像素（例如图像，或任何带有 CSS 的东西） 与 实际 上的像素不同一个屏幕——它们被标准化为一个标准。出于这个原因，您不应该使用像素密度来提高图像质量，而应该只增加图像的宽度，因为这些额外的像素将被塞进更高分辨率的屏幕上。

Answer 5

请尝试以下媒体查询：-

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }