如何根据屏幕大小缩放 HTML 中元素的大小？答案

【问题标题】：How do I scale the size of the elements in my HTML according to screen size?如何根据屏幕大小缩放 HTML 中元素的大小？
【发布时间】：2023-04-01 23:32:02
【问题描述】：

我想在屏幕缩小或放大时缩放标题中元素的大小。如何才能做到这一点？这是我的html：

    <!DOCTYPE html>
    <html>
      <head>
        <title>myWebpage</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

        <link href="main.css" rel="stylesheet" type="text/css">
      </head>

      <body>
          <header>
            <h1>Hello!</h1>
            <p>Welcome<br>Make Yourself at Home</p>
          </header>
     </body>
   </html>

这是我的css：

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}

/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/webassets/apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;


}
h1 {
  color: honeydew;
  font-size: 50px;
  font-family: "Helvetica Neue";

}
p {
  color: honeydew;
  font-size: 30px;
  font-family: "Helvetica Neue-Thin", sans-serif;
}

这是我的全屏页面：

& 这里它被缩小到最小的窗口：

如您所见，我需要像我的背景一样缩放文本.. 我该如何实现呢？

【问题讨论】：

标签： html css text scaling elements

【解决方案1】：

将vw 用于font-size。

h1{
 font-size : 7.5vw;
}

p{
 font-size : 2vw;
}

演示is here.

【讨论】：

我可以将它应用到按钮元素吗？
@MikeStrong 抱歉回复晚了。是的，你可以将它应用到任何你想要的元素上。

【解决方案2】：

您可以根据需要使用 CSS3 媒体查询：-

.text {
font-size:15px;
}

@media (max-width:730px){
font-size:5px;
}

【讨论】：

【解决方案3】：

要缩放文本，您不必使用固定的px 大小。你最好使用相对尺寸，它会随着视口或屏幕尺寸而变化。有几个选项，例如em、rem、vw。

在this example 中，您可以看到通过将px 更改为vw，文本如何相对于视口变得响应。

【讨论】：

我可以将它应用到按钮元素吗？
@MikeStrong 是的，这适用于所有具有高度的元素。

【解决方案4】：

执行此操作的更常见方法之一是媒体屏幕。

例子：

@media (max-width:400px){
  h1{
    font-size: 10em;
  }
}

另一种可能的方法是使用现有的移动响应框架，例如引导程序。要将引导程序合并到您的页面中，请将此样式表链接添加到页面顶部：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

在此处阅读有关引导文档的更多信息： http://getbootstrap.com/css/

【讨论】：

【解决方案5】：

您应该在您的 css 上使用大小为 100% 的媒体查询、网格布局和图像类。我建议您使用Bootstrap，这是一个广泛用于创建完全响应式体验的免费库。

【讨论】：

在您的代码中添加一个全新的库以仅用于简单的文本缩放对我来说似乎不合理。
我确实低估了你的帖子，因为我同意 Arjun 的第一条评论，你没有回答这个问题，但给出了一些大致的方向。也因为你的建议对这个问题没有意义。