窗口大小html css

Window sizing html css

本文关键字：css html 窗口大小      更新时间：2023-09-26

我正在尝试创建这样的东西：

网页示例

网页示例

然而，我不确定他们是如何根据窗口大小重新调整div的大小的。他们如何能够在不同的窗口大小中设置div中的标题以保持在中心。div中的图片和单词在一定的窗口大小后变得更大，在一定的大小后变得更小。图片保持高清，没有拉伸或压缩。请帮忙。

css中有一条规则，称为@media规则
它可以用作响应式网页。

例如

Css

<style>
   body {
      background-color: lightblue;
   }
   @media screen and (min-width: 480px) {
      body {
         background-color: lightgreen;
      }
   }
</style>

Html

<body>
   <h1>Resize the browser window to see the effect!</h1>
   <p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
相关文章：