CSS - 一个 100% 宽度的元素或两个 50% 宽度的元素，取决于屏幕尺寸

Question

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

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

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

这适用于最小的屏幕尺寸，并且适用于大于 1000 像素的可用屏幕，但大于 500 和 < 1000 的屏幕不起作用。

Answer 1

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

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

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

    width: 300px;
}

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

这个针对不同的浏览器窗口大小使用不同的 CSS 设置。 待续

This blog post非常简洁地概述了这个功能，基本上是这样做的:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

第三种解决方案是使用 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");