Question

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

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

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

更详细的解释：

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

现在我将此插件提供给用户。用户继续将插件的div放入另一个内部宽度 100px 的div。现在一切看起来很糟糕。 （100px的80％不是很多[80px]）。当然，我希望用户将我的插件放在他拥有的任何小宽度div中。

到目前为止我看到的解决这个问题的方法是创建一个具有一定宽度的持有者div - 比如硬编码300px。 （ex-jQuery UI的Datepicker div; Meteor的登录widget div）。然后编码，始终知道我之前设置的300px宽度不会改变。

但我不知道这是多么好的解决方案。

此外，如果我决定使用硬编码宽度，我的插件需要宽度~1000px。因为我希望div通过媒体查询来调整大小。如果我使用硬编码宽度（例如1000px宽度的持有者div）并将其放在页面上，页面将具有水平滚动。而且你不能简单地隐藏持有者div（父div）并让孩子同时显示。因此，这需要设置位置：相对于持有者（父）div，将其放在窗口之外，并对子div使用相同 - 位置：相对于父偏移相反方向的相对偏移。

我希望到目前为止我很清楚，并没有让你困惑！

一个代码示例来说明我在说什么：的 http://jsbin.com/ifawez/18/edit

Answer 1

如果我正确地阅读此内容，那么这里的主要问题是根据代码的位置，它可能会变得太小。

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

潜在地，您甚至可以使用脚本将父div的宽度与屏幕尺寸的最小宽度相关联。

Answer 2

@ 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显示其组件的方式：使用position relative / absolute。

.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;
}

总结如下：

媒体查询单独使用屏幕大小，任何内部元素的大小调整可以按屏幕大小的百分比进行。它们可以提供巨大的帮助，但是你可以使你的组件在屏幕外的百分比下工作，或者指定像min-height和！important这样的东西（如@Octavian所建议的那样）
元素的Javascript操作目前更容易，但是更昂贵的选择（jQuery SIzzle非常慢）
许多库（例如jQuery UI）使用Javascript和position relative / absolute来确保它们的组件/插件能够很好地适用于所有用户的屏幕尺寸。
我最终将位置与javascript结合起来，同时模拟媒体查询和多栏设计，以便做出响应。

感谢所有参与的人！

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

2 个答案:

总结如下：