将 HTML 布局缩放到屏幕大小
[英]Scaling HTML layout to the screen size
问题描述
Could you tell me how to fix a HTML layout automatically with the screen resolution?
你能告诉我如何使用屏幕分辨率自动修复 HTML 布局吗？ Example, I am coding HTML in screen resolution of 1024 by 768 pixels.例如，我正在以 1024 x 768 像素的屏幕分辨率对 HTML 进行编码。 If I switch to 800 by 600 pixels, I want my HTML windows changed automatically to fix the screen.如果我切换到 800 x 600 像素，我希望我的 HTML windows 自动更改以修复屏幕。
How could I do that?我怎么能那样做？
4 个解决方案
解决方案1
6 2009-03-24 09:48:56
By HTML window , I assume that you are talking about HTML contents and not browser window.通过HTML window ，我假设您在谈论 HTML 内容而不是浏览器 Z05B8C74CBD96FBF2DE4C1A352702。
If this is the case, the keywords for what you want to do are liquid/fluid/elastic design .如果是这种情况，您想要做的关键字是liquid/fluid/elastic design 。
You may want to read Elastic Design by Patrick Griffiths on A List Apart site, or search google for liquid design .您可能想在A List Apart网站上阅读Patrick Griffiths 的 Elastic Design ，或在Google 上搜索液体设计。
解决方案2
3 2009-03-24 09:36:02
You don't have to use javascript.您不必使用 javascript。 Just set the width of your element (div, table etc) to 100% in the CSS file.只需在 CSS 文件中将元素（div、表格等）的宽度设置为 100%。 Then it will adjust accordingly to the width of the viewport.然后它将根据视口的宽度进行相应调整。 (the same thing applies to the height) （同样的事情适用于高度）
<!-- 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;
}
解决方案3
0 2009-03-24 09:41:57
If you mean the actual browser window, Javascript has screen.width and screen.height which return the current resolution;如果你的意思是实际的浏览器 window，Javascript 有 screen.width 和 screen.height 返回当前分辨率； see examples of use .见使用示例。 On a particular webpage, you could set a script to run on a timer to check whether these values have changed, and resize the window if they have.在特定网页上，您可以设置脚本以在计时器上运行以检查这些值是否已更改，并调整 window 的大小（如果有）。 It seems a peculiar achievement though - screen resolutions change very infrequently, and you would have to be on the particular page which contains this JS script for it to work.不过，这似乎是一项特殊的成就——屏幕分辨率很少更改，并且您必须在包含此 JS 脚本的特定页面上才能使其工作。 Also note that the width and height properties don't take any note of where toolbars sit, so the window could disappear behind there.另请注意，宽度和高度属性不会记录工具栏所在的位置，因此 window 可能会消失在那里。 This is also bad behaviour since auto-maximising overrides what the user may prefer.这也是不好的行为，因为自动最大化会覆盖用户可能喜欢的内容。
解决方案4
0 2009-03-24 09:48:53
Your question is vague so I try to help with some examples that may be related to your problem.您的问题含糊不清，因此我尝试提供一些可能与您的问题相关的示例。
If you need to get the size of the browser window using JavaScript, here is an example:如果您需要使用 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};
}
To programmatically detect resizing of the browser window, attach a listener to the window.onresize event.要以编程方式检测浏览器 window 的大小调整，请将侦听器附加到 window.onresize 事件。 Note that the following simplified example doesn't care if there already is a listener attached (use addEventListener/attachEvent as appropriate instead):请注意，以下简化示例不关心是否已经附加了一个侦听器（适当地使用 addEventListener/attachEvent）：
window.onresize = function() {
var size = getClientSize();
alert("Width: " + size.width + ", Height: " + size.height);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.