CSS 设置 HTML 页面和浏览器窗口的尺寸

在本文中，我们将介绍如何使用CSS设置HTML页面和浏览器窗口的尺寸。CSS提供了一系列属性和技巧，可以帮助我们控制页面的布局，使之适应不同设备和浏览器窗口的尺寸。

阅读更多：CSS 教程

设置HTML页面的尺寸

在CSS中，我们可以使用width和height属性来设置HTML页面的宽度和高度。这两个属性可以使用像素（px）、百分比（%）、视窗单位（vw和vh）等不同的尺寸单位来表示。

使用像素单位

使用像素单位可以确切地指定页面的尺寸。例如，下面的CSS代码将把HTML页面的宽度设置为800像素，高度设置为600像素：

html {
  width: 800px;
  height: 600px;
}

使用百分比单位

使用百分比单位可以根据浏览器窗口的大小调整页面的尺寸。例如，下面的CSS代码将把HTML页面的宽度设置为浏览器窗口宽度的50%，高度设置为浏览器窗口高度的80%：

html {
  width: 50%;
  height: 80%;
}

使用视窗单位

视窗单位是相对于浏览器窗口的尺寸来计算的。vw表示视窗宽度的百分比，vh表示视窗高度的百分比。例如，下面的CSS代码将把HTML页面的宽度设置为浏览器窗口宽度的50%，高度设置为浏览器窗口高度的80%：

html {
  width: 50vw;
  height: 80vh;
}

设置浏览器窗口的尺寸

除了设置HTML页面的尺寸，我们还可以使用CSS来控制浏览器窗口的尺寸和位置。

使用`window.innerWidth`和`window.innerHeight`

window.innerWidth和window.innerHeight属性可以获取当前浏览器窗口的宽度和高度。我们可以使用这两个属性和SetInterval函数来动态地改变浏览器窗口的尺寸。

下面的示例展示了如何使用window.innerWidth和window.innerHeight属性来实时监测浏览器窗口的尺寸：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
  <script>
    function setWindowSize() {
      const width = window.innerWidth;
      const height = window.innerHeight;
      console.log(`窗口宽度：{width}px，窗口高度：{height}px`);
    }

    window.onload = function() {
      setWindowSize();
      window.addEventListener('resize', setWindowSize);
    };
  </script>
</head>
<body>
</body>
</html>

以上示例中，使用window.onload事件来初始化窗口尺寸，并使用window.addEventListener函数监听resize事件。每次窗口尺寸改变时，setWindowSize函数将被调用，并在控制台输出窗口的宽度和高度。

使用CSS Media Queries

CSS Media Queries可以根据浏览器窗口的宽度或高度应用特定的样式。我们可以根据不同的窗口尺寸来显示或隐藏某些元素，或者改变它们的样式。

下面的示例展示了如何使用CSS Media Queries来在浏览器窗口宽度小于600像素时隐藏一个元素：

@media (max-width: 600px) {
  .element {
    display: none;
  }
}

上述CSS代码中，当浏览器窗口宽度小于600像素时，类名为element的元素将被隐藏。

总结

本文介绍了如何使用CSS来设置HTML页面和浏览器窗口的尺寸。我们可以使用像素、百分比和视窗单位来控制HTML页面的尺寸，使用window.innerWidth和window.innerHeight属性来获取浏览器窗口的尺寸，以及使用CSS Media Queries来根据窗口尺寸应用特定的样式。通过合理地设置页面和浏览器窗口的尺寸，我们可以提升用户体验，并确保网页在不同设备和浏览器窗口下的可用性。

以上就是关于CSS设置HTML页面和浏览器窗口尺寸的介绍，希望对您有所帮助！