当前位置：文江博客话题详情

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

发布于 2024-09-07 00:01:32 字数 630 浏览 2 评论 0原文

问题： 我的客户希望我为他的产品创建一个启动网页，以便页面上不应该有滚动，任何浏览器或窗口尺寸。

疑问：使用CSS和Javascript可以实现这一点吗？

一些早期诊断：这可能有点类似于这个或this 但不同之处在于我想以特定比例调整每个元素的尺寸，而不仅仅是调整父 DIV 的高度。

所以，声明：我需要根据（当前窗口大小和参考）之间的比率来更改每个元素（图像、div、文本...所有）的尺寸窗口大小）。也许 Javascript 可以解决这个问题？

问题：如何做到这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

俯瞰星空 2024-09-14 00:01:32

只需将和的 height 和 width 设置为 100%、溢出到隐藏并使用left、top、width 和 height 的百分比 elements：

<!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>

这些百分比是相对于包含块而言的，在本例中是。

更新：回答另一个问题：目前几乎不支持背景图像的缩放。当 CSS 3 background-size< /a> 属性取得进展（请参阅此表），事情会变得更容易。现在，看看这个答案（是的，这意味着：更多标记）。

Just set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:

<!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>

These percentages are relative to the containing block, which is, in this case <body>.

Update: To answer another question: scaling of background images is almost not supported yet. When the CSS 3 background-size property gains ground (see this table), things will be easier. For now, have a look at this answer (yes, that means: more markup).

回复收藏 0 原文

~没有更多了~