Html 固定定位分区内的响应完美正方形第二部分

几天前我在这里问了一个问题：

我从WebTiki（又是ty）那里得到了完美的解决方案，到目前为止效果良好。如果你感兴趣，可以在这里查看：（网站仍在建设中，仅用于移动设备，除非你大量模仿你的窗口，否则你不会看到pc浏览器上的内容）

韦伯·蒂基做的小提琴是

现在，我开始使用

@media all and (orientation:landscape) {}

我需要将“完美正方形”固定在窗口左侧，从上到下完美分布。我试过修改小提琴，但似乎无法使它工作。它似乎是虚拟div技巧不工作的宽度而不是高度

谁能帮我把这件事做好

---

像往常一样，提前这么多，请原谅我的英语。希望问题足够清楚

我明白你想做什么，首先我会这样做：

通过查看您的网站，我发现您在所有框中使用图像，所以我要做的是在css中的img标记中设置一个特定的大小，而不必担心框上的高度，因为它们会随着img的宽度自动缩放，因为它是正方形的。希望您理解，如果没有，我会再试一次，如果我得到一些更多的代码等等

//had to post some code to be able to link the jsfiddle... dont care about this line 

---

如果要反转使用%垂直填充或边距，CSS无法。 您需要，检索文档的高度并使用来设置容器的宽度，然后，它可以用于参考您的正方形大小

5个正方形：

基本javascript（调用onload/onresize函数）：

---

在onload和onresize事件上：

---

您可以使用mediaquerie for orientation:横向覆盖此内容

然后必须设置

！重要信息

指向此方向中给定给容器的

宽度

，以覆盖Javascript应用的

宽度

这里是压缩后用来测试
的一组文件，您可能想要接受上一个问题中帮助您的答案..？重复的-如果您对此有进一步的问题，您可以扩展您的原始问题。我上一个问题的答案是正确的，tilwin，但是（可能我解释得不够好）我现在需要一个新的定位方块：从上到下，方块对齐窗口的左侧，而不是从右到左在页面底部。正如我所说的，我不能适应他们给我的解决方案，甚至贴了一张小提琴来显示我的问题。泰·克布罗伊，我不知道我可以扩展之前已经有了正确答案的问题。我会看看我是否能找到方法。这里的问题不能用我在另一个问题中指出的技术来解决，因为它是基于容器的宽度，你需要在这个问题上适应容器的高度。所以这不是重复的，你打开一个新问题做得很好。是的。这是我第一次尝试，但当您更改浏览器的大小时，背景图像之间的空间会增加或减少（即使容器之间的距离不会增加或减少）。问题是（因为它已经为纵向方向制作了，我希望“正方形”是一个“div”，因为它会改变颜色和不透明度（通常，并且取决于您所在的页面，这些正方形（将成为链接）将被“停用”改变不透明度和背景颜色…我可以改变背景img，但“编程”已经由一位大副完成）。无论如何，谢谢你，但是那些方块没有响应，因为我正在寻找从上到下填充窗口的高度（方块变大或变小取决于布瓦瑟的高度和宽度。如前所述，您需要将其包装在“加载”和“调整大小”功能中：我的道歉。非常感谢。我将尝试您的解决方案。您是否了解如何使用填充顶部%和父级宽度绘制方块？），欢迎光临，我们都在学习我对javascript是非常有限的，但在它上面工作。我不完全理解它，但所有这些解决方案都能帮助我学习它（不，我还没有写自己的代码，但要熟悉它，至少要理解这些代码实现了什么）
var height = window.innerHeight;
var menu = document.getElementById("container");
menu.style.width=height/6 +"px";

window.onload= function() {
    squarethem();
}

window.onresize= function() {
    squarethem();
}
function squarethem() {
    var height = window.innerHeight;
    var menu = document.getElementById("container");
    menu.style.width=height/6 +"px";
}
                  }