一个固定位置div内的响应完美广场。第二部分 [英] Responsive perfect squares inside a fixed positioned div. Part II

问题描述

我几天前在这里提出了一个问题：一个固定位置div内的响应完美广场。任何人都可以帮助我吗？。

我从web-tiki（ty再一次）和完美的解决方案到目前为止工作得很好。如果有兴趣，你可以在这里查看： http://asadordearanda.com/movil （网站仍在建设中，只是为了移动，你不会看到什么是在PC浏览器，除非你很多你的窗口）。

web-tiki制作的小提琴是 http://jsfiddle.net/webtiki/7jJsf/12/ 。

现在我开始使用 b
$ b

  @media全部更改此网页的横向布局和（orientation：landscape）{} 
  

我需要将完美广场固定在窗户左侧，从上到下完美分布。我试图修改小提琴，但我似乎无法使其工作。它看起来虚拟div技巧不能处理高度的宽度 http://jsfiddle.net/7jJsf/ 14 / 。

任何人都可以帮助我做这件事吗？

一如既往地如此提前很多，并原谅我的英语。希望这个问题已经足够清楚了如果你想反转使用％vertical padding或margin，CSS不能。
您需要检索文档的高度并使用它来设置容器的宽度，然后可以用它来指定您的广场的大小。

5格： http://jsfiddle.net/7jJsf/30/

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

  var height = window.innerHeight; 
 var menu = document.getElementById（container）; 
 menu.style.width = height / 6 +px; 
  

---

On onload& onresize events：

  window.onload = function（）{
 squarethem（） ; 
} 
 
 window.onresize = function（）{
 squarethem（）; 
} 
函数squarethem（）{
 var height = window.innerHeight; 
 var menu = document.getElementById（container）; 
 menu.style.width = height / 6 +px; 
} 
} 
  

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

---

您可以使用mediaquerie覆盖orientation：landscape。

然后，您必须设置！important 为了覆盖由Javascript应用的宽度宽度，宽度以此方向给容器。

http://jsfiddle.net/7jJsf/34 / ，这里是一组压缩文件，用于测试 ZIP 。

I made a question a couple days ago here: Responsive perfect squares inside a fixed positioned div. could anyone help me?.

and I had the perfect solution from web-tiki (ty again) and working fine so far. If interested you can check here: http://asadordearanda.com/movil (web still under construction and just for mobile, you won't see what is about on a pc browser unless you mimize a lot your window).

the fiddle that web-tiki made is http://jsfiddle.net/webtiki/7jJsf/12/.

And now I am starting to change the layout of this web for landscape orientation using

@media all and (orientation:landscape) {}

I need the "perfect squares" to be fixed positioned at the left of the window, perfectly distribute from top to bottom. I have tried to modified the fiddle but I can't seem to make it work. it seemes the dummy div trick is not working on with width insteed of height http://jsfiddle.net/7jJsf/14/.

Could anyone help me and make this work?

as always ty so much in advance and excuse my english. hope the question is clear enough

解决方案

if you want to reverse use the use % vertical padding or margin , CSS cannot. You need , to retrieve height of document and use to set the width of your container, then , it can be used for reference to size your squares .

5 squares : http://jsfiddle.net/7jJsf/30/

basic javascript (to call in onload/onresize function ):

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

---

On onload & onresize events :

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/

---

You can overwrites this using mediaquerie for orientation:landscape.

You must then set !important to the width given to container in this orientation in order to overwrite the width applied by Javascript.

http://jsfiddle.net/7jJsf/34/ and here the set of files zipped to test ZIP .

这篇关于一个固定位置div内的响应完美广场。第二部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！