Question

对于我正在研究的项目，我需要创建一个八边形网格。我可以使用css创建一个八边形，问题是它没有响应浏览器，因为它不会随浏览器窗口调整大小。这很重要，因为要在多个设备上查看网站，并且必须在移动设备上查看网格。

八边形纯粹是出于显示目的，所以我可以使用图像背景，但如果可能的话我想避免使用它。我不是不喜欢使用JavaScript，但我不是JavaScript的专家，也不知道从哪里开始。

Answer 1

您是否尝试实现something like this？（调整浏览器窗口大小以查看其行为）

<强> HTML ：

<div class='o'></div>
<!--many more-->
<div class='o'></div>

相关的 CSS ：

.o {
    float: left;
    overflow: hidden;
    position: relative;
    padding: 5%;
}
.o:before {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: rotate(45deg);
    background: linear-gradient(dodgerblue, black);
    content: '';
}

或like this？

<强> HTML ：

<div class='o-outer'><div class='o'></div></div>
<!--many more-->
<div class='o-outer'><div class='o'></div></div>

CSS：

.o-outer {
    float: left;
    position: relative;
    padding: 5%;
    margin: 4.33% -3% 0 0
}
.o {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}
.o:before {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: rotate(45deg);
    background: radial-gradient(dodgerblue, black);
    content: '';
}
.o-outer:nth-child(even) .o {
    margin: 71.66% 0 -71.66% 0;
}

Answer 2

以下只是解决问题的另一种方法，我不知道你想要多复杂，但我会根据设备应用不同的css。请考虑您项目的复杂性。

如果要在多个设备上浏览网站，我建议为不同的设备/浏览器使用不同的CSS。

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

上述代码将把所述css应用于具有500及以上的设备。

这是一种简洁的方法，因为它检查设备宽度而不是浏览器宽度，因为这在使用移动/手持设备时非常有用。

另一种方法是检查浏览器宽度。

<link rel='stylesheet' media='screen and (min-width: 500px) and (max-width: 800px)' href=example2.css' />

仅当浏览器窗口介于500px和800px之间时，上述代码才会应用样式表。

您可以编写一个函数来检查应用css的条件。

添加文件

<link rel="stylesheet" type="text/css" href="main.css" /> 
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="example2.css" />

每次调整窗口时，您都可以检查要应用的CSS，[添加jQuery]

function adjust(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/ex1.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/ex2.css");
    } else {
        $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjust($(this).width());
    $(window).resize(function() {
        adjust($(this).width());
    });
});

Answer 3

如果我理解正确，这不是你应该使用Javascript解决的问题。太沉重笨拙

我认为如果你可以放弃使用CSS创建它们，你可以完全用CSS对它进行排序。在这种情况下，请尝试使用百分比background-size，此处的一些示例：http://whereswalden.com/files/mozilla/background-size/more-examples.html和此处https://developer.mozilla.org/en-US/docs/CSS/background-size

或者，如果您的目标是支持移动设备，则可能只想禁用可能的缩放How can I "disable" zoom on a mobile web page?

Answer 4

OP说，他在CSS中绘制了图像，因此使用background-size将无法正常工作。你能发贴你写的CSS代码来绘制octogon吗？

虽然老实说我确实同意ido，并且没有真正看到使用css绘制图像（相对于png）的巨大性能提升，特别是当你打算简单地将其作为某种装饰功能时。

无论如何，请看看这个JsFiddle：http://jsfiddle.net/XkM9R/10/，我还在研究动态调整大小。

CSS3响应，动态八角形

4 个答案: