基于窗口大小调整页面元素大小 [英] Resizing Page Elements based on Window size
问题描述
问题：
我的客户希望我为他的产品创建一个启动网页，这样网页上就不会出现滚动，任何浏览器或窗口的尺寸。
疑问：是否可以使用CSS和Javascript？
这可能类似于此或此< a>但是区别在于，我想以特定比例调整每个元素的尺寸，而不仅仅是调整父DIV的高度。
因此，语句：我需要根据（当前窗口大小和参考窗口大小）之间的比率更改每个元素的尺寸（images，divs，text ... all） ）。
只需设置<$ c $>的 height 和 width c>< html> 和< body> 到 100％ c $ c> overflow 至 hidden 并使用 left ， top ， width 和 height ：
<！DOCTYPE html>
< html>
< head>
< meta charset = UTF-8>
< title>比例调整大小< / 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> 。
更新：要回答另一个问题：几乎不支持缩放背景图片。当CSS 3 background-size property gains ground（see 这个表），事情会更容易。现在，请查看此答案（是的，这意味着：更多标记）。
Problem: My Client wants me to create a launch webpage for his product such that there should be no scroll on the page, be any browser or window dimensions.
Doubt: Is this possible using CSS and Javascript?
Some Early Diagnosis: This might be a little similar to this or this but the difference is that I want to resize the dimensions of each and every element in a particular ratio and not just adjust the height of a parent DIV.
So, the statement: I need to change the dimensions of each and every element (images, divs, text ... all) based on a ratio between the (current window size and a reference window size). Perhaps Javascript might have a cure for this?
Question: How to do this?
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).
这篇关于基于窗口大小调整页面元素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
