如何根据屏幕大小缩放 HTML 中元素的大小？
Mik*_*ong 5 html css scaling text elements
我想在屏幕缩小或放大时缩放标题中元素的大小。如何才能做到这一点？这是我的 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;
}
这是我的全屏页面：
&这里它被缩小到最小的窗口：
正如你所看到的，我需要文本像我的背景一样缩放..我如何做到这一点？
用于。vwfont-size
h1{
font-size : 7.5vw;
}
p{
font-size : 2vw;
}
演示就在这里。
| 归档时间： |
|
| 查看次数： |
11604 次 |
| 最近记录： |