以下是我使用JavaScript制作的示例。无论页面的尺寸是多少,每块砖的比例始终为5:2,页面上总共会有20块砖。
<!doctype html>
<html>
<body>
<svg id="wall" style="position:absolute;top:0;left:0;" width="100%" height="100%" onload="renderBackground();" onresize="renderBackground();">
</svg>
<script>
var wall=document.getElementById("wall");
function renderBackground()
{
var width=window.innerWidth;
wall.innerHTML="";
for(y=0;y<window.innerHeight;y+=width/25)
{
// Even Bricks
for(x=0;x<width;x+=width/20)
{
createBrick(x,y,width/20,width/50);
}
// Odd Bricks
for(x=0-width/40;x<width;x+=width/20)
{
createBrick(x,y+width/50,width/20,width/50);
}
}
}
function createBrick(x,y,width,height)
{
var brick=document.createElementNS(wall.namespaceURI,"rect");
var shine=document.createElementNS(wall.namespaceURI,"rect");
var drain=Math.random()*24;
wall.appendChild(brick);
wall.appendChild(shine);
brick.setAttribute("x",x);
brick.setAttribute("y",y);
brick.setAttribute("width",width);
brick.setAttribute("height",height);
shine.setAttribute("x",x+width/20);
shine.setAttribute("y",y+height/10);
shine.setAttribute("width",9*width/10);
shine.setAttribute("height",height/10);
brick.setAttribute("style","fill:"+rgb(6*Math.random()+128-drain,12*Math.random()+128-drain,6*Math.random()+128-drain)+";stroke:"+rgb(51,51,68)+";stroke-width:"+String(height/20));
shine.setAttribute("style","fill:"+rgb(160,160,160));
}
function rgb(r,g,b)
{
return "rgb("+String(Math.floor(Math.max(Math.min(r,256),0)))+","+String(Math.floor(Math.max(Math.min(g,256),0)))+","+String(Math.floor(Math.max(Math.min(b,256),0)))+")";
}
</script>
</body>
</html>
如果我用php生成这个完全相同的页面,完全删除JavaScript,我怎么能强制砖块保持相同的5:2比例,而无需调用renderBackground()
来重绘和调整每次调整窗口大小时它们的大小?
我想知道如何在所有元素上执行此操作,而不仅仅是SVG。
谢谢!
答案 0 :(得分:0)
如果您使用的是IE9或更高版本,除少数移动浏览器外,CSS接受单位尺寸&#34;视口宽度&#34; (vw)和/或&#34;视口高度&#34; (VH)。宽度为5v w 且高度为2v w 的元素将为宽度的5% >宽度,以及高度中视口的宽度的2%。
由于您将元素的宽度和高度设置为视口的仅宽度的百分比,因此它将保持恒定的宽高比。
捕获:它在 SVG元素中不起作用。它严格来说是一个CSS单元。它也仅考虑整个视口的宽度或高度,而不考虑任何包含元素。你的例子占据了整个屏幕,所以没关系。
知道要绘制多少行会有一些问题,至少不使用JavaScript。您将自己锁定到20列,但行完全取决于客户端的宽高比。