0

我正在学习新的“响应式设计”，我理解的第一件事是我们应该使用百分比来定义我们可以定义的任何内容，最重要的是，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 下时，一切似乎都很好。

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

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

JSFIDDLE

4

2 回答 2

1

这是一切都停止并开始媒体查询的作用的地方吗？

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

您想要实现的是一种无论视口大小都可以工作的设计，当视口太小或太大时，意味着用户难以使用或阅读布局，那么媒体查询提供了最好的现在可以“重置”布局以重新注入新维度集的可用性。

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

于 2013-03-02T15:12:53.563 回答
0

您正在寻找的内容称为响应式布局。

这里有几个参考链接可以帮助您实现响应式布局。

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

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

于 2013-03-02T15:13:59.570 回答