html - 响应式设计 - 320 及以上 - 如何使用媒体查询？

Question

目前，我正在尝试绕过响应式设计。您经常听到的一句话是“移动优先!”。我明白这意味着什么，但我仍然不确定如何将其付诸实践。

我正在使用 320 及更高版本的工具包/样板，其中已经设置了一些媒体查询:min-width: 480px, min-width: 600px, 最小宽度:768px，最小宽度:992px & 最小宽度:1382px。
您可能会注意到，缺少诸如 min-width: 320px 之类的内容。

这是否意味着我在媒体查询之外设计我的页面，宽度为 320 像素，然后使用媒体查询覆盖某些需要调整的位？

Answer 1

你应该先写你的 CSS 而不要使用那些媒体查询。实际上你应该忽略那些媒体查询。

一旦您准备好“移动”CSS(让您的浏览器窗口非常小)，您就可以开始调整浏览器窗口的大小。当事情开始变得奇怪时，例如，太多空白、行变长，您可以为该最小宽度添加一个新的媒体查询。

在新的媒体查询中，您可以针对看起来很奇怪的东西进行调整，完成后再次开始扩大，继续这样做，直到您认为已经覆盖了足够的屏幕空间为止。

p>

没有单一的设备宽度，因为有成千上万种不同的设备，所以在实际看到您的设计在运行之前，您无法决定您的断点。