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

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

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

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

更详细的解释：

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

现在我把这个插件给用户。用户继续并将插件的div放入另一个插件中 宽度100px的div。现在一切看起来都糟透了。（100px的80%不是很多[80px]）。 当然，我希望用户把我的插件放在他所有的小宽度div中

到目前为止，我看到的解决这个问题的方法是创建一个具有一定宽度的holder div，比如硬编码300px。（例如，jQueryUI的Datepicker div；Meteor的登录小部件div）。然后对它进行编码，始终知道我之前设置的300px宽度不会改变

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

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

我希望到目前为止我是清楚的，没有把你弄糊涂

下面是一个代码示例，用于说明我所说的内容：

---

如果我读对了，这里的主要问题是，根据代码所在的位置，它可能会变得太小

那么，为什么不添加一个最小宽度属性！重要吗？这样，您仍然可以根据父容器的大小来确定大小，但请确保它不会变得太小和难看

---

你甚至可以用一个脚本来计算父div的宽度和屏幕大小的最小宽度。

@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元素的宽度，而不仅仅是屏幕大小

此外，我还遵循jQueryUI显示其组件的方式：使用相对位置/绝对位置

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

总而言之：

媒体查询单独处理屏幕大小，任何内部元素的大小调整都可以按屏幕大小的百分比进行。它们可能会有很大的帮助，但您可以使用屏幕外的百分比或指定最小高度和！重要事项（由@Octavian建议）

元素的Javascript操作目前比较容易，但成本更高（jQuerySizzle相当慢）

许多库（例如jqueryui）将Javascript与position-relative/absolute结合使用，以确保它们的组件/插件在所有用户的屏幕大小上都能正常工作

最后，我将position与javascript结合起来，同时模拟媒体查询和多列设计，以提高响应能力

---

感谢所有参与的人

100px的80%是80px，而不是10px如果你使用媒体查询，你可以混合设置宽度和百分比宽度。这个问题实在太广泛了。事实上，媒体查询并不是一个好方法来处理这样的通用小部件。您正在寻找内容决定其大小的CSS，但目前没有那么多可用内容（多列模块、Flexbox），您真正能做的只是控制流/定位，而不是其他任何事情。