CSS3 响应式、动态八边形

Question

为了我正在处理的一个项目，我需要创建一个八边形网格。我可以使用CSS来创建一个八边形，但问题是它不能响应浏览器，也就是说它不能随着浏览器窗口大小而调整大小。这很重要，因为该网站将在多个设备上查看，网格必须可在移动设备上查看。

八边形纯粹用于显示目的，所以可能我只需使用图像背景，但如果可能的话，我想避免这样做。我不排斥使用JavaScript来完成它，但我并不是JavaScript专家，也不知道从哪里开始。

- PhilWheatley

---

“它不随浏览器窗口大小调整”是什么意思？您想让您的八边形增大，还是想让多个此八边形填充浏览器背景？ - Andrei Volgin

Answer 1

你是否想要实现类似这样的功能？（调整浏览器窗口大小以查看其行为）。

.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: '';
}

<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>

或者是类似这样的东西吗？

.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;
}

<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>

- Ana

---

第一个正是我想要的，它如此简单，只需旋转一个正方形，这让我感到非常恼火，我觉得自己非常愚蠢。Transform似乎会稍微影响性能，但这绝对是最简单的解决方案。谢谢。 - PhilWheatley

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());
    });
});

- Rahul

---

这其实很有道理，我想我只是对更流畅的调整大小有点过分执着，但其实并不必要。我选择了 @Ana 提供的答案作为解决方案，但如果证明降低性能，我会使用这种方法。谢谢。 - PhilWheatley

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?

- ido

---

如果我选择使用图像方式，background-size 将是解决方案，然而我正在尝试在纯 CSS 中创建八边形，但还是感谢你的回答。 - PhilWheatley

Answer 4

楼主说他是用CSS绘制的图像，所以使用background-size无法解决问题。你能否把你绘制八边形的CSS代码发一下？

不过说实话我同意ido的看法，我并没有看到使用CSS绘制图像（与png相比）在性能上有多大的提升，特别是当你只是打算将其简单地作为某种装饰特征时。

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

- ksrb

---

这是一条注释，而不是一个答案。 - Andrei Volgin

很抱歉，我没有在OP帖子底部看到评论标签，所以这是我提问的唯一方式，不管怎样，我已经修改了我的帖子变成回答 :)。 - ksrb

我并没有编写这段代码，我相信我们实际上找到了与我使用的代码完全相同的源代码。我在修改该代码以适应响应式布局时遇到的问题是它需要使用百分比大小而不是像素大小，但是这在创建八边形的边框时是不可能的。使用CSS而不是图像的原因并不是为了性能，而是为了避免图像缩放时出现质量损失（可以通过创建比实际所需更大的八边形图像来解决，但这会导致性能问题）。 - PhilWheatley