Problem:我的客户希望我为他的产品创建一个启动网页,以便页面上不应该有滚动,任何浏览器或窗口尺寸。
Doubt:使用 CSS 和 JavaScript 可以实现这一点吗?
一些早期诊断:这可能有点类似于this or this但不同之处在于,我想以特定的比例调整每个元素的尺寸,而不仅仅是调整父 DIV 的高度。
所以,声明:我需要根据元素之间的比例更改每个元素(图像、div、文本...所有)的尺寸(当前窗口大小和参考窗口大小)。也许 Javascript 可以解决这个问题?
问题:这个怎么做?
只需设置height
and width
of <html>
and <body>
to 100%
, overflow
to hidden
并使用百分比 for left
, top
, width
and 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>
这些百分比是相对于包含块,在这种情况下<body>
.
Update:回答另一个问题:目前几乎不支持背景图像的缩放。当 CSS 3background-size财产取得进展(见这张桌子),事情会变得更容易。现在,看看这个答案(是的,这意味着:更多标记)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)