CSS百分比宽度如何根据窗口大小调整

Question

这个问题可能已经有答案了，但我找不到:s。

我的问题是关于基于百分比动态调整div大小的。

请查看下面的代码示例以了解我所做的示例和可能的解决方案。 我想知道是否有更好的方法来调整大小？

更详细的解释：

假设我正在编写一个人们可以插入其页面中的插件。(想象一下登录表单)。 我开始设计插件的div。我使用媒体查询来实现不同设备的期望外观。我直接在“body”元素内部工作。 我使用百分比进行设计(我喜欢百分比)。假设我将div设置为80%宽度。

现在我把这个插件给用户。用户将插件的div放在另一个宽度为100px的div中。现在一切看起来都很糟糕。(100px的80%不多[80px])。 当然，我希望用户将我的插件放在任何他拥有的小宽度div中。

到目前为止，我看到的解决此问题的方法是创建一个特定宽度的容器div - 例如硬编码300px。（例如 - jQuery UI的Datepicker div; Meteor的登录小部件div）。然后编写代码时始终知道之前设置的300px宽度不会改变。

但我不知道这是否是一个好的解决方案。

此外，如果我决定使用硬编码宽度，我的插件将需要大约1000px的宽度。因为我希望div随着媒体查询而调整大小。如果我使用硬编码宽度（例如1000px宽的容器div）并将其放在页面上，则页面将具有水平滚动条。您不能简单地隐藏holder div（父div）并同时显示子div。因此，这需要为holder（父）div设置position:relative，将其放置在窗口外，并对子div使用相同的偏移量 - position:relative，与父偏移量相反的方向。

我希望到目前为止我说得很清楚，没有让您感到困惑！

一个代码示例以说明我所说的：http://jsbin.com/ifawez/18/edit

- Plyto

---

80%的100px是80px，而不是10px。 - Dancrumb

如果你正在使用媒体查询，可以将固定宽度与百分比宽度混合使用。 - hungerstar

这个问题对于SO来说太宽泛了。事实上，媒体查询并不是一个很好的方式来处理像那样的通用小部件。你需要使用CSS来控制内容的大小，但目前可用的选项并不多（如多列模块、Flexbox），你真正能做的只是控制流程/定位，而不能做其他任何事情。 - cimmanon

Answer 1

@cimmanon的评论为我解释了问题所在。 问题在于当前缺乏可用的HTML/CSS“工具”。由于响应式设计是比较新近引入的，因此没有很多CSS原生工具来适应尺寸变化。

例如，媒体查询仅适用于窗口/文档的宽度，而不适用于其他元素（如div）的宽度。

我目前采用的解决方案是使用JavaScript来确定div的宽度并进行调整。 我重新调整要显示的列数（如cimmanon建议使用Multi-Column模块），在Webkit浏览器上相当稳定。由于这是完全在JavaScript（和jQuery的Sizzle）中完成的，因此我保留一个大小数组，如下所示：

 var widthArray = [
    {min:0,   max:250,  columns:1, secondary:false},
    {min:251, max:350,  columns:1, secondary:true },
    {min:351, max:479,  columns:1, secondary:true },
    //more div sizes
 ];
 // more code here
 $(element).css({
    "column-count": object.columns,
    "-moz-column-count": object.columns,
    "-webkit-column-count": object.columns
});

这有点像媒体查询，但允许处理html元素的宽度，而不仅仅是屏幕尺寸。

此外，我遵循jQuery UI显示其组件的方式：使用相对/绝对定位。

.outer_div {
    position: relative;
}
.inner_div_with_elements {
    position:   absolute;
    z-index: 1010;
    width: 99%;    
    float: left;
    overflow: hidden;
    ...
}
.inner_components_displayable {
    position: relative;
    display: block;
}
.inner_components_hidden {
    display: none;
}

总结：

1. 仅使用媒体查询可以适应屏幕大小，通过百分比调整内部元素的大小可以很有帮助，但是你需要让组件基于屏幕大小的百分比工作，或者像@Octavian建议的那样指定min-height和!important。
2. 目前，使用JavaScript操作元素更容易，但是是一种代价更高的选择（jQuery SIzzle非常慢）。
3. 许多库（例如jQuery UI）将JavaScript与相对/绝对位置结合使用，以确保它们的组件/插件在所有用户的屏幕大小上都能正常工作。
4. 我最终结合了位置和JavaScript来模拟媒体查询和多列设计，实现响应式布局。

感谢所有参与者！

- Plyto

Answer 2

如果我理解正确的话，这里的主要问题在于基于代码位置，它可能会变得太小。

那么为什么不添加一个min-width属性，并加上！important呢？这样你仍然可以将大小基于父容器，但确保它不会变得太小和丑陋。

潜在地，您甚至可以编写脚本，使其基于父DIV的宽度和屏幕尺寸的最小宽度。

- Octavian