这可能在某个地方得到了回答,但我找不到它: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
最佳答案
@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;
}
总结一下:
- 媒体查询单独与屏幕大小一起工作,并且任何内部元素的大小都可以按屏幕大小的百分比来调整。它们可以提供巨大的帮助,但是您需要让组件使用基于屏幕外的百分比,或者指定诸如 min-height 和 !important 之类的内容(如 @Octavian 所建议的)
- 元素的 Javascript 操作目前更容易,但成本更高(jQuery SIzzle 相当慢)
- 许多库(例如 jQuery UI)将 Javascript 与相对/绝对位置结合使用,以确保其组件/插件在所有用户的屏幕尺寸上都能正常工作。
- 我最终将位置与 JavaScript 结合起来,同时模拟媒体查询和多列设计,以提高响应速度。
感谢大家的参与!
关于CSS 百分比宽度根据窗口调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17665610/