gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:54:29 26 4
gpt4 key购买 nike

问题:我的客户希望我为他的产品创建一个启动网页,这样页面上就不会滚动,无论是任何浏览器还是窗口尺寸。

疑问:这可以使用 CSS 和 Javascript 吗?

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

因此,声明:我需要根据 (当前窗口大小)之间的比率更改每个元素(图像、div、文本...所有)的尺寸和引用窗口大小)。也许 Javascript 可以解决这个问题?

问题:如何做到这一点?

最佳答案

只需设置 heightwidth<html><body>100% , overflowhidden并使用 percentages对于 left , top , widthheight元素数:

<!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 属性(property)取得进展(参见 this table ),事情会变得更容易。现在,看看 this answer (是的,这意味着:更多标记)。

关于javascript - 根据窗口大小调整页面元素的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3097494/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com