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;
}

这是我的全屏页面：

＆安培;这里缩小到最小的窗口：

正如你所看到的，我需要按照我的背景来缩放文本..我该如何做到这一点？

Answer 1

要缩放文字，您不必使用固定的px尺寸。您最好使用相对大小，这些大小因视口或屏幕大小而异。有几个选项，例如em，rem，vw。

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

Answer 2

vw使用font-size。

h1{
 font-size : 7.5vw;
}

p{
 font-size : 2vw;
}

演示is here.

Answer 3

您可以使用CSS3媒体查询： -

.text {
font-size:15px;
}

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

Answer 4

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

Answer 5

这种做法的一种常见方式是媒体屏幕。

示例：

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

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

<!-- 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中元素的大小？

5 个答案: