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

Question

这可能在某个地方得到了回答，但我找不到它:s

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

请查看下面的代码示例，了解我所做的示例和可能的解决方案。请问有没有更好的调整大小的方法？

更详细的解释:

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

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

到目前为止，我看到的这个问题的解决方案是创建一个特定宽度的保持器 div - 比如说硬编码 300px。 (例如 jQuery UI 的 Datepicker div；Meteor 的登录小部件 div)。然后对其进行编码，始终知道我之前设置的 300px 宽度不会改变。

但我不知道这个解决方案有多好。

此外，如果我决定使用硬编码宽度，我的插件将需要 ~ 1000px 的宽度。因为我希望 div 通过媒体查询调整大小。如果我采用硬编码宽度(例如宽度为 1000px 的保持器 div)并将其放在页面上，则页面将具有水平滚动。并且您不能简单地隐藏持有者 div(父 div)并同时显示子级。因此，这需要为holder(父)div设置position:relative，将其放在窗口之外，并为子div使用相同的position:relative，在父偏移的相反方向上具有相同的偏移量。

我希望到目前为止我已经说得很清楚了，没有让你感到困惑!

一个代码示例来说明我正在谈论的内容:<强> http://jsbin.com/ifawez/18/edit

Answer 1

@cimmanon 的评论让我明白了一切。问题是目前缺乏可用的 HTML/CSS“工具”。由于响应性最近才开始发挥作用，因此没有很多 CSS 原生工具来适应尺寸的变化。

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

我目前采用的解决方案是使用 Javascript 来确定 div 的宽度并相应地调整大小。我调整的是我想要显示的列数(我使用 cimmanon 建议的多列模块)，这在 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. 媒体查询单独与屏幕大小一起工作，并且任何内部元素的大小都可以按屏幕大小的百分比来调整。它们可以提供巨大的帮助，但是您需要让组件使用基于屏幕外的百分比，或者指定诸如 min-height 和 !important 之类的内容(如 @Octavian 所建议的)
2. 元素的 Javascript 操作目前更容易，但成本更高(jQuery SIzzle 相当慢)
3. 许多库(例如 jQuery UI)将 Javascript 与相对/绝对位置结合使用，以确保其组件/插件在所有用户的屏幕尺寸上都能正常工作。
4. 我最终将位置与 JavaScript 结合起来，同时模拟媒体查询和多列设计，以提高响应速度。

感谢大家的参与!