javascript - CSS3 响应式、动态八角形

Question

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

八边形纯粹是为了显示目的，所以我可以只使用图像背景，但如果可能的话我想避免这种情况。我并不反对使用 JavaScript，但我并不完全是 JavaScript 专家，也不知道从哪里开始。

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>

Answer 2

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

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

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

上面的代码会将上述 css 应用于 witdh 为 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/背景尺寸

或者，如果您的目标是支持移动设备，您可能只想禁用可能的缩放如何在移动网页上“禁用”缩放？

Answer 4

OP说，他用CSS绘制了图像，所以使用背景大小不起作用。您能否发布您为绘制八角形而编写的 CSS 代码？

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

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