CSS - 一个 100% 宽度的元素或两个 50% 宽度的元素在一行上取决于屏幕大小答案

【问题标题】：CSS - one 100% width element or two 50% width elements on a line depending on screen sizeCSS - 一个 100% 宽度的元素或两个 50% 宽度的元素在一行上取决于屏幕大小
【发布时间】：2011-12-23 11:58:00
【问题描述】：

我想显示一些 (1..n) 的饼图。如果屏幕足够大，我想在一行中显示两个，但如果不是每个都需要 100% 宽度。这可能只用CSS吗？如果没有，实现它的最干净的方法是什么？

我目前的尝试是将饼图 div 的 min-width 设置为我们支持的最小屏幕尺寸上可用的宽度（留下 500px 可用），所以是这样的：

div.piechart {
  min-width: 500px;
  width: 50%;
  float:left;
}

这适用于最小的屏幕尺寸，适用于 > 1000px 可用的屏幕，但对于 > 500 和

【问题讨论】：

您要支持哪个浏览器版本？
Chrome、Firefox 和 IE 的当前和最新版本。
如果你使用服务端语言检查屏幕并加载某个css文件会更好。
如果他们调整浏览器窗口大小怎么办？

标签： css

【解决方案1】：

所有浏览器都支持的第一个解决方案

所有浏览器都支持此解决方案。使用浮动（或内联块）以及定义的元素尺寸。只要有足够的可用内容，每行就会有更多元素，但是当内容大小变窄时，它会相应地采用。

.item
{
    display: inline-block;
    // or
    float: left;

    width: 300px;
}

第三种解决方案是使用 Javascript

您最终总是可以求助于 Javascript 来支持较旧的浏览器，并且还可以将您的元素设置为 50% 或 100% 的宽度。

我会这样做：

.item
{
    display: inline-block;
    width: 100%;
}

.small
{
    width: 50% !important;
}

!important 规则仅在之后定义定义其宽度的可调整大小元素的样式时才需要。如果.small 是最后一个，则可以省略!important 规则。

然后将项目定义为：

<div class="item resizable">...</div>

在 jQuery 或类似库的帮助下，附加一个窗口调整大小事件处理程序以检查浏览器窗口宽度并为可调整大小的元素添加/删除额外的 CSS 类：

var width = ...
if (width < 1000)
{
    $(".item.resizable").addClass("small");
}
else
{
    $(".item.resizable").removeClass("small");
}

如果你知道自己在做什么，或者写更少的代码：

var width = ...
var e = $(".item.resizable");
width < 1000 && e.addClass("small") || e.removeClass("small");

【讨论】：

您的第一个解决方案本质上是我现在拥有的固定宽度版本 - 但我确实需要宽度为 50% 或 100%...
感谢有关屏幕尺寸相关样式表的链接 - 我不知道。不幸的是，我必须支持每个主要浏览器的最新版本，据我所知，这在 IE8 上不起作用。不过，这就是未来！
@Russell：我还添加了第三个使用一点 Javascript 的解决方案。

【解决方案2】：

如果元素可以内联显示 (display:inline;)，那么您应该可以将它们保持原样（固定宽度），并且当尺寸减小时，浏览器应该将它们分成两行。

要明白我的意思，请尝试以 HTML 格式打开它，然后稍微调整浏览器的大小：
<html> <body> <span style="width:500px; background-color:blue;">1111111111111111111111111111111111111111111111111111111111111111111</span> <span style="width:500px; background-color:red;">22222222222222222222222222222222222222222222222222222222222222222222</span> </body> </html>

除此之外，您可能还需要使用 Javascript。

【讨论】：

如果您宁愿创建一个 JSFiddle 并提供指向它的链接不是更好吗？
我不想要固定宽度的元素，我希望它们是 50% 或 100% 宽度。
所以它们都是 50%，直到屏幕尺寸 > XX。哦，那你需要JS。看看上面 Robert Koritnik 的回答。 @罗伯特是的，它可能会。下次我会这样做。

【解决方案3】：

除非有人能告诉我更好的方法（请这样做！），否则我将使用 jQuery 来做：

在$(document).ready()：

$(window).resize(function() {
  if ($(this).width() >= 1300){
    $('div.piechart').addClass('fifty');    
  } else {
    $('div.piechart.fifty').removeClass('fifty');
  } 
}).resize();

在 CSS 中：

div.piechart {
  width: 100%;
}

div.piechart.fifty {
  width: 50%;
  float: left;
}

【讨论】：

【解决方案4】：

您应该使用媒体查询来执行此操作：

见：http://jsfiddle.net/thirtydot/Y97QL/show/（改变浏览器窗口的宽度）

.piechart {
    width: 100%;
}
@media screen and (min-width: 1300px) {
    .piechart {
        width: 50%;
        float: left;
    }
}

一些旧版浏览器 (IE7/8) do not support media queries.

如果您需要支持这些浏览器，您应该包含一个 JavaScript polyfill，例如 Respond.js。

【讨论】：

所有浏览器都支持的第一个解决方案

最新浏览器的第二个解决方案

第三种解决方案是使用 Javascript