[英]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.