如何根据屏幕大小缩放HTML中的元素的大小?

I want to scale the size of the elements within my header as the screen scales down or up in size. How can this be done? Here is my html:

我想要缩放我的标题中元素的大小，就像屏幕的大小一样。怎么做呢?这是我的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>

and here is my css:

这是我的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;
}

Here is my fullscreen page:

这是我的全屏页面:

& here it is scaled down to the smallest window:

这里缩小到最小的窗口:

As you can see, i need the text to scale as my background did.. how do i accomplish this?

正如你所看到的，我需要文字像我的背景一样缩放。我如何做到这一点?

5 个解决方案

#1

Use vw for font-size.

对字体大小使用大众。

h1{
 font-size : 7.5vw;
}

p{
 font-size : 2vw;
}

Demo is here.

演示在这里。

#2

To scale text, you don't have to use fixed px sizes. You are better of using relative sizes, which vary in relation to the viewport or screen size. There are several options like em, rem, vw.

要缩放文本，不需要使用固定的px大小。您可以更好地使用相对大小，这些大小与视端口或屏幕大小有关。有几种选择，如em, rem, vw。

In this example you can see how, by changing the px to vw, the text becomes responsive in relation to the viewport.

在这个示例中，您可以看到，通过将px更改为vw，文本与viewport的关系如何变得响应。

#3

You can use CSS3 Media Queries for you purpose :-

你可以使用CSS3媒体查询为你的目的:-

.text {
font-size:15px;
}

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

#4

You should use media queries, grid layout and image class sized to 100% on your css. I recommend you to use Bootstrap, a free library widely used to crete fully responsive experiences with no much hassle.

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

#5

One of the more common ways of doing this would be a media screen.

一种更常见的方法是使用媒体屏幕。

Example:

例子:

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

Another possible way would be to use an existing mobile responsive framework such as bootstrap. To incorporate bootstrap into your page, add this stylesheet link to the top of your page:

另一种可能的方法是使用现有的移动响应框架，例如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">

Read more about the bootstrap documentation here: http://getbootstrap.com/css/

在这里阅读更多关于引导文档的内容:http://getbootstrap.com/css/

#1