Question

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

假设我有2个inline-block div。

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

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

因此我们阻止他们调整太多（事情变得不可读），我们应该以像素为单位使用min-width。

如果我为第一个div设置min-width:200px;，为第二个div设置min-width:100px;，当我调整窗口大小直到第二个div变为第一个div时，一切看起来都很好。

但是，如果我调整更多和更多，width将保持不变，因为浏览器大小小于这些div的min-width，这将导致创建滚动条。

我正在调整大小，所以我可以测试在较小的分辨率（手机，平板电脑）上看起来应该如何，我在这里遗漏了什么？这一切都停止了，媒体查询的作用是从哪里开始的？或者我还能做些什么来解决这个问题？

JSFIDDLE

Answer 1

一切都停止了，媒体查询的角色是从哪里开始的？

基本上，是的。当您觉得您的设计无法再挤进您提供的空间时，您需要使用媒体查询。在您谈到的时候，大约300px的窗口大小（加上边距？），您可能希望使用媒体查询来更改显示这些div的方式，也许这样它们就是视口宽度的100％，因此将一个堆叠在另一个之上而不是并排堆叠。对于你的例子，这实际上可以有效地覆盖最小宽度。

您想要实现的是一种无论视口大小如何都能运行的设计，以及使视口太小或太大的时刻意味着布局很难让用户使用或阅读，然后是媒体查询现在提供最好的方式来重置＆＃34;布局为这组新维度重新注入可用性。

我会说你不必担心设置最小宽度;尽管使用它们来考虑互联网资源管理器是一个很有力的论据，因为它不会在它的旧版本中处理媒体查询。

Answer 2

您正在寻找的是响应式布局。

以下是一些可能有助于您实现自适应布局的参考链接。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices

响应式设计和最小宽度（以像素为单位）

2 个答案: