4

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

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

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

更详细的解释：

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

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

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

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

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

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

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

4

2 回答 2

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 结合起来，同时模拟媒体查询和多列设计以实现响应性。

感谢所有参与的人！

于 2013-07-25T14:46:33.370 回答
0

如果我没看错的话，这里的主要问题是它可能会根据代码所在的位置变得太小。

那么为什么不添加一个带有 !important 的最小宽度属性呢？这样你仍然可以基于父容器的大小，但要确保它不会变得太小和难看。

潜在地，您甚至可以有一个脚本来确定父 div 的宽度和屏幕尺寸的最小宽度。

于 2013-07-16T16:08:05.610 回答