我想知道字体大小的单位是否为measures 1% of the width and height of a page？我认为这将使我更轻松，并且无需使用JavaScript即可帮助我完成我想做的事情（尽管只要可行，任何答案都是可以接受的）。如果没有这样的单位，该如何操作字体呢？我唯一想到的是%，但是我不知道它们是否有效。
当我尝试双向调整页面大小时，我的问题来了。它可以按预期目的工作，但是当您将页面尺寸调整得很小时，它看起来就不会很好。而且我是一个完美主义者，当它不起作用时，它会困扰我。这是我的代码（确切地说，是我的代码的摘录。如果需要完整的代码，我将在此处进行编辑）：
更新（0.1）：
我正在尝试使用javascript做出更好的答案。我还没有完成代码。这里是：
function myFunction() {
var h11a = document.getElementById("h1_1_a");
var w = window.innerWidth;
var h = window.innerHeight;
window.addEventListener("resize", function() {
var w2 = window.innerWidth;
var h2 = window.innerHeight;
if (w > w2) {
h11a.style.fontSize = "calc(6*(0vh + 1.5vw))";
} else if (h > h2) {
h11a.style.fontSize = "calc(6*(3vh + 0vw))";
}
});
}* {
box-sizing: border-box;
}
body {
margin: 0%;
}
.div_1 {
position: relative;
width: 100%;
Height: 20%;
background-color: #000000;
border-top: .4vh solid #ff7400;
border-left: .4vh solid #ff7400;
border-right: .4vh solid #ff7400;
border-bottom: .2vh solid #ff7400;
}
#div_1_a {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#h1_1_a {
line-height: 100%;
height: 60%;
color: #ff7400;
font-size:calc(6*(1vh + 1vw));
white-space: nowrap
}<html lang="en">
<head>
<link rel="stylesheet" href="halloweenEvent1.css" type="text/css" />
<meta charset="UTF-8" />
<meta name="description" content="A Halloween Event Website" />
<meta name="keywords" content="Brad,Website,Personal,Information,Halloween" />
<meta name="author" content="Bradley William Elko" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Event (Home)</title>
</head>
<body onload="myFunction()">
<div class="div_1">
<div id="div_1_a">
<h1 id="h1_1_a">Halloween Website</h1>
</div>
</div>
</body>
</html>任何帮助是极大的赞赏！
最佳答案
calc( n * ( 1vh + 1vw ) ) proposed by Dai的演示。
*
{
box-sizing: border-box;
}
body
{
margin:0%;
}
.div_1
{
position:relative;
width:100%;
Height:20%;
background-color:#000000;
border-top:.4vh solid #ff7400;
border-left:.4vh solid #ff7400;
border-right:.4vh solid #ff7400;
border-bottom:.2vh solid #ff7400;
}
#div_1_a
{
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
#h1_1_a
{
line-height:100%;
height:60%;
color:#ff7400;
font-size: calc( 6 * ( 1vh + 1vw ) );
white-space: nowrap
}<html lang="en">
<head>
<link rel="stylesheet" href="halloweenEvent1.css" type="text/css"/>
<meta charset="UTF-8"/>
<meta name="description" content="A Halloween Event Website"/>
<meta name="keywords" content="Brad,Website,Personal,Information,Halloween"/>
<meta name="author" content="Bradley William Elko"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Event (Home)</title>
</head>
<body>
<div class="div_1">
<div id="div_1_a">
<h1 id="h1_1_a">Halloween Website</h1>
</div>
</div>
</body>
</html>我希望字体大小符合其所处的div（在这种情况下）
我要理解的是，您希望文本与容器保持相同的比例。我将使用SVG来回避问题：
*
{
box-sizing: border-box;
}
body
{
margin:0%;
}
.div_1
{
position:relative;
width:100%;
Height:20%;
background-color:#000000;
border-top:.4vh solid #ff7400;
border-left:.4vh solid #ff7400;
border-right:.4vh solid #ff7400;
border-bottom:.2vh solid #ff7400;
}<html lang="en">
<head>
<link rel="stylesheet" href="halloweenEvent1.css" type="text/css"/>
<meta charset="UTF-8"/>
<meta name="description" content="A Halloween Event Website"/>
<meta name="keywords" content="Brad,Website,Personal,Information,Halloween"/>
<meta name="author" content="Bradley William Elko"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Event (Home)</title>
</head>
<body>
<div class="div_1">
<svg class="svg" viewbox="0 0 100 20">
<text fill="#ff7400" x="50" y="10" font-size="50%" text-anchor="middle" dominant-baseline="central">Halloween Website</text>
</svg>
</div>
</body>
</html>缺点是您失去了
h1的语义。关于javascript - CSS:是否存在等于vh + vw的单位？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40198201/