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

Question

我想在屏幕按比例缩小或放大时缩放页眉中元素的大小。如何才能做到这一点？这是我的 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;
}

这是我的全屏页面：

&这里缩小到最小window：

如您所见，我需要让文本像我的背景一样缩放。我该怎么做？

Answer 1

您应该在 css 上使用媒体查询、网格布局和将图像 class 调整为 100%。我建议您使用 Bootstrap，这是一个广泛用于创建完全响应式体验的免费库，没有太多麻烦。

Answer 2

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

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

Answer 3

对 font-size 使用 vw。

h1{
 font-size : 7.5vw;
}

p{
 font-size : 2vw;
}

演示 is here.

Answer 4

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

.text {
font-size:15px;
}

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

Answer 5

媒体屏幕是一种更常见的实现方式。

示例：

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

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

<!-- 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">

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

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

How do I scale the size of the elements in my HTML according to screen size?

html

css

scaling

text

elements