html - 固定位置 div 内的响应式完美正方形。第二部分

Question

我几天前在这里提出了一个问题:Responsive perfect squares inside a fixed positioned div. could anyone help me? .

而且我从 web-tiki 获得了完美的解决方案(又是 ty)并且到目前为止工作正常。如果有兴趣可以在这里查看:http://asadordearanda.com/movil (网络仍在 build 中，仅适用于移动设备，除非您大量模拟窗口，否则您将看不到 PC 浏览器上的内容)。

web-tiki 制作的 fiddle 是 http://jsfiddle.net/webtiki/7jJsf/12/ .

现在我开始使用

更改此网站的横向布局

@media all and (orientation:landscape) {}

我需要将“完美正方形”固定在窗口左侧，从上到下完美分布。我试图修改 fiddle ，但我似乎无法让它工作。似乎虚拟 div 技巧不适用于宽度而不是高度 http://jsfiddle.net/7jJsf/14/ .

谁能帮助我完成这项工作？

一如既往地提前打字，请原谅我的英语不好。希望问题够清楚

Answer 1

如果你想反向使用 % vertical padding 或 margin ，CSS 不能。您需要，检索文档的高度并用于设置容器的宽度，然后，它可用于引用调整正方形的大小。

5 个方 block :http://jsfiddle.net/7jJsf/30/

基本 javascript(调用 onload/onresize 函数):

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

---

关于 onload 和 onresize 事件:

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

http://jsfiddle.net/7jJsf/33/

---

您可以使用 orientation:landscape 的 mediaquerie 覆盖它。

然后您必须将 !important 设置为在此方向上为容器指定的 width，以便覆盖 Javascript 应用的 width。

http://jsfiddle.net/7jJsf/34/这里是压缩文件集以测试 ZIP .