我正在学习新的"响应式设计"，我明白的第一件事就是我们应该使用百分比来定义我们可以定义的任何东西，最重要的是，width。
假设有2个inline-blockdiv
<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将保持固定，因为浏览器的大小小于这些div的min-width，这将导致创建滚动条
我正在调整大小，这样我就可以测试在较小的分辨率(手机，平板电脑)上的效果，我在这里错过了什么吗?这是否意味着一切都停止了，媒体询问的作用开始了?还是我还能做些什么来弥补?
JSFIDDLE
这是一切停止和媒体查询的作用开始吗?
从本质上说,是的。当你觉得你的设计不能再挤进你所提供的空间时，你就需要使用媒体查询。在你谈论的点上，大约300px的窗口大小(加上边距?)，你会想要使用媒体查询来改变你显示这些div的方式，也许使它们是viewport宽度的100%，从而堆叠在另一个之上，而不是并排。对于您的示例，这将在实际中有效地覆盖最小宽度。
你想要实现的是一个不管视口大小都能工作的设计，当视口太小或太大的时候，意味着布局对用户来说很难使用或阅读，那么媒体查询提供了现在"重置"布局的最佳方式，为新维度重新注入可用性。
我想说你不必担心设置最小宽度;尽管有一个强烈的理由认为使用它们来考虑Internet explorer，因为它在旧版本中无法处理媒体查询
你正在寻找的是所谓的响应式布局。
这里有几个参考链接，可以帮助你实现响应式布局。
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices