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

标签 css resize media-queries

这可能在某个地方得到了回答,但我找不到它: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;
}

总结一下:

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

感谢大家的参与!

关于CSS 百分比宽度根据窗口调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17665610/

相关文章:

javascript - 使用 jQuery 监听浏览器宽度/高度变化

CSS 媒体查询不能 100% 工作有什么建议吗?

css - 用媒体查询或js定位IE的文字大小

javascript - 无法专注于 div(如果我用鼠标滚动它不会滚动,除非我单击内容)

css - Twitter Bootstrap 表调整大小,行溢出

ios - 如何强制 UIAlertView 的大小合适?

css - 使用媒体查询重新排序 div 表格单元格

css - 水平滚动条仅在 IE7 中出现,即使溢出 :hidden being set

css - 如何避免元素重叠?我尝试以百分比设置宽度并使用显示 :block

css - 列数在 Chrome 中正常,但在 IE 和 Firefox 中不正常