[英]Scaling HTML layout to the screen size
你能告诉我如何使用屏幕分辨率自动修复 HTML 布局吗？ 例如，我正在以 1024 x 768 像素的屏幕分辨率对 HTML 进行编码。 如果我切换到 800 x 600 像素，我希望我的 HTML windows 自动更改以修复屏幕。
我怎么能那样做？
通过HTML window ，我假设您在谈论 HTML 内容而不是浏览器 Z05B8C74CBD96FBF2DE4C1A352702。
如果是这种情况，您想要做的关键字是liquid/fluid/elastic design 。
您可能想在A List Apart网站上阅读Patrick Griffiths 的 Elastic Design ，或在Google 上搜索液体设计。
您不必使用 javascript。 只需在 CSS 文件中将元素（div、表格等）的宽度设置为 100%。 然后它将根据视口的宽度进行相应调整。 （同样的事情适用于高度）
<!-- in yourHtml.html file -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="yourStyleSheet.css" />
</head>
<body>
<div class="fullWidth">
Your content
</div>
</body>
</html>
<!-- in yourStyleSheet.css file -->
div.fullWidth {
width:100%;
height:100%;
background-color:#CCC;
}
如果你的意思是实际的浏览器 window，Javascript 有 screen.width 和 screen.height 返回当前分辨率； 见使用示例。 在特定网页上，您可以设置脚本以在计时器上运行以检查这些值是否已更改，并调整 window 的大小（如果有）。 不过，这似乎是一项特殊的成就——屏幕分辨率很少更改，并且您必须在包含此 JS 脚本的特定页面上才能使其工作。 另请注意，宽度和高度属性不会记录工具栏所在的位置，因此 window 可能会消失在那里。 这也是不好的行为，因为自动最大化会覆盖用户可能喜欢的内容。
您的问题含糊不清，因此我尝试提供一些可能与您的问题相关的示例。
如果您需要使用 JavaScript 获取浏览器 window 的大小，这里是一个示例：
function getClientSize() {
var width = 0, height = 0;
if(typeof(window.innerWidth) == 'number') {
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {width: width, height: height};
}
要以编程方式检测浏览器 window 的大小调整，请将侦听器附加到 window.onresize 事件。 请注意，以下简化示例不关心是否已经附加了一个侦听器（适当地使用 addEventListener/attachEvent）：
window.onresize = function() {
var size = getClientSize();
alert("Width: " + size.width + ", Height: " + size.height);
}
如何使用 html/css 中的屏幕尺寸缩小我的图像，或者甚至缩放问题？
[英]How can I scale my image down with the size of the screen in html/css, or is scaling even the issue?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.