css - 有没有一些 "best approach"用于响应式设计？

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 计算机更小。我不明白这一点，因为 300 像素应该是 300 像素，不是吗？

抱歉，如果我问了很多事情，但我有一些疑问，并且找到关于此的良好且可靠的信息并不容易!

Answer 1

我认为使用您注意到的媒体查询设置会让您的生活变得复杂，因为它们将使目标不同的视口(viewport)或窗口宽度变得困难。

@media only 屏幕和 (min-width: 480px) { ... } 将定位所有宽度 480px 及以上，
@media only 屏幕和 (min-width: 600px) { ... } 将定位所有宽度 600px 及以上。

因此，每当视口(viewport)为 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) { ... }  

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

关于像素与百分比有不同的思想流派，并且两者都有优点。如果您正在了解响应式设计，我个人认为值得花时间使用一些成熟的框架，例如 Bootstrap或Foundation或Skeleton或许多其他之一。

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

祝你好运!