有没有一个单位等于vh + vw ?

CSS: Is there a Unit that the Equivalent to vh + vw?

本文关键字：vh vw 有一个 单位      更新时间：2023-09-26

我想知道是否有一个单位的字体大小，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 ) )，其中n是您选择的系数

Dai提出的calc( n * ( 1vh + 1vw ) )演示。

* 
  { 
  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的语义

不，没有这样的单元，但也许vmin将是您的问题的解决方案。

编辑:

如果你想在垂直和水平方向都居中，你可以这样做:

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper__text {
  font-size: 30vmin;
}
<div class="wrapper">
  <div class="wrapper__text">My text</div>
</div>

由于:

http://howtocenterincss.com/

相关文章：