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) { ... }

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

对于Responsiv设计，您认为它更好地使用css中的百分比或更好地使用像素吗？我问这个，因为媒体查询使用像素，所以也许它最好不要使用百分比？

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

很抱歉，如果我问了很多东西，但我有些疑惑，并且不容易找到关于此的好的和可靠的信息！

Answer 1

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

@media only screen和（min-width：480px）{...} 将定位所有宽度480px及以上，
@media only screen和（min-width：600px）{...} 将定位所有宽度600px及以上。

因此，只要视口为600px或更高，他们就会争取控制权。您可以考虑以下内容：

/* 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＆＃34;对角线，我有一个具有相同分辨率的手机，但它的屏幕尺寸是4＆＃34;对角线（仅举例）。

如何在不同的屏幕尺寸中容纳相同数量的像素？

答案很简单：我的手机上的像素比我的显示器上的像素小（这是Apple视网膜显示器与其他显示器之间的巨大差异）。

媒体查询......

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

Site responsiveness using media queries explanation

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

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

Answer 3

这里有一些参考资料：

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

首先从小屏幕开始，然后展开，直到它看起来像拉屎。是时候断点了！ -Stephen Hay

基本上你应该使用流畅的布局（你可以从网上找到的各种css流体网格中进行选择）并测试你的设计放大和缩小你的浏览器：当你的设计＆＃34;裂缝＆＃34;，它＆＃39 ;是时候添加媒体查询了。你没有在某个断点重读整个网站：一切都可以正常工作，你只需要调整一定宽度的文本。这样做。

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

希望这会有所帮助

Answer 4

您可能应该停止考虑像素和屏幕尺寸的网页。

我可以理解为什么将实际设备宽度用作设计的断点是很诱人的，但请记住这些断点将无效新设备发布的第二个。或者，当用户以意外方式与网站交互时，例如根据自己的喜好调整文本大小。

使用em单位作为断点。这样，即使用户调整文本大小，您的媒体查询也会正确触发。
当你的内容/布局需要时，将你的断点调整为，而不是针对特定的屏幕尺寸（也就是说，你应该不包括980以上的紧凑（移动）导航-ish像素，因为拥有旧显示器的人可能不会理解如何浏览它。

编写移动优先CSS ，与使用min-width一样，用于媒体查询。这有助于您保持CSS DRY。但是，不意味着您永远不应该使用max-width进行媒体查询 - 总有一些情况下您只想将样式添加到较小的屏幕。始终避免重复。

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

像素密度是一个复杂的主题，但渲染像素（例如图像或任何带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) { ... }

是否有一些＆＃34;最好的方法＆＃34;对于响应式设计？

5 个答案: