根据窗口大小调整页面元素的大小

Question

根据窗口大小调整页面元素的大小

javascriptjquerycssresizedimensions

3

问题： 我的客户希望我为他的产品创建一个启动网页，使得在任何浏览器或窗口尺寸下都不会出现滚动条。

疑问：这是否可以使用CSS和Javascript实现？

初步诊断：这可能与this或this有些相似，但不同之处在于，我想按特定比例调整每个元素的尺寸，而不仅仅是调整父DIV的高度。

因此，陈述如下：我需要根据（当前窗口大小和参考窗口大小之间的比率）更改每个元素（图像、div、文本...全部）的尺寸。也许Javascript可以解决这个问题？

问题：如何实现这一点？

- OrangeRind

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcel Korpel · Accepted Answer

只需将<html>和<body>的height和width设置为100％，overflow设置为hidden，并在元素的left，top，width和height中使用百分比即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <title>Proportional resizing</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    div {
      position: absolute;
      left: 30%;
      top: 20%;
      width: 40%;
      height: 30%;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div>divthing</div>
</body>
</html>

这些百分比是相对于包含块 containing block 的，而在本例中，该包含块是 <body>。

更新：回答另一个问题：目前几乎不支持背景图片的缩放。当 CSS 3 background-size 属性普及时（请参见此表），事情会更容易。现在，请查看这个答案（是的，这意味着：更多标记）。