html - 响应式设计和像素最小宽度

Question

我正在学习新的“响应式设计”，我了解到的第一件事就是我们应该使用百分比来定义我们可以定义的任何东西，最重要的是，width .

假设我有 2 inline-block分区。

<div>
   //Left div
</div>
<div>
   //Right div
</div>

第一个 div，有一个 width:50% ，第二个 div 有一个 width:40% , 这里的一切看起来都很好，它们彼此相邻，当您调整浏览器大小时，它们会变小。

这样我们就可以阻止他们调整太多(事情变得不可读)，我们应该使用 min-width以像素为单位。

如果我设置 min-width:200px;对于第一个 div，min-width:100px;对于第二个 div，当我调整窗口大小时直到第二个 div 位于第一个 div 下方时，一切似乎都很好。

但是如果我越来越大地调整大小，width将保持固定，因为浏览器大小小于 min-width这些 div，这将导致创建滚动条。

我正在调整大小，以便测试在较小分辨率(手机、平板电脑)上的效果，我是否遗漏了什么？这是一切停止的地方，媒体查询的作用开始了吗？还是我可以做更多的事情来解决这个问题？

JSFIDDLE

Answer 1

Is this where everything stops and the role of media queries begin?

基本上，是的。当您觉得您的设计无法再挤进您提供的空间时，您需要使用媒体查询。在你谈论的那一点上，大约 300 像素的窗口大小(加上边距？)你会想要使用媒体查询来改变你显示这些 div 的方式，也许这样它们就是视口(viewport)宽度的 100%，并且因此将一个堆叠在另一个之上而不是并排堆叠。对于您的示例，这实际上会有效地覆盖最小宽度。

您想要实现的是一种无论视口(viewport)大小如何都有效的设计，当视口(viewport)太小或太大时，意味着用户难以使用或阅读布局，然后进行媒体查询立即提供“重置”布局的最佳方式，以重新注入(inject)新维度集的可用性。

我会说您不必担心设置最小宽度；尽管使用它们来考虑 Internet Explorer 有一个强有力的论据，因为它不会处理旧版本中的媒体查询。