CSS：是否有一个相当于 vh + vw 的单位？答案

【问题标题】：CSS: Is there a Unit that the Equivalent to vh + vw?CSS：是否有一个相当于 vh + vw 的单位？
【发布时间】：2016-10-22 23:54:09
【问题描述】：

我想知道是否有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>

非常感谢任何帮助！

【问题讨论】：

标签： javascript html css resize viewport-units

【解决方案1】：

使用calc( n * ( 1vh + 1vw ) )，其中n 是您选择的系数。

【讨论】：

这是用于 javascript 的吗？
@BradleyWilliamElko 这是 CSS，请参阅 calc at MDN。另请参阅browser compatibility for calc。
我从来没有用过这个，所以我很难弄清楚具体放在哪里。我的意思是，我把它放在哪一个，我是放width:calc(n*1vh +1vw))还是...？
@Theraot 我查看了您的链接，但我仍然不确定如何实现这个 int CSS。你能帮帮我吗？
@BradleyWilliamElko 这是 CSS，你在你写 CSS 的地方写它。也许这是XY problem 的一个例子。戴的答案是替换 hv + vw 的单位，这是标题中的问题，也是解释第一段的一种方式。然后你继续说，当你重新浏览你的页面时“它看起来不太好”......好吧，但是你想怎么看？编辑：从另一个答案的 cmets 你似乎想要对齐和调整大小。

【解决方案2】：

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的语义。

【讨论】：

你知道有什么办法可以做到水平调整时只影响vw，垂直调整时只影响vh？
@BradleyWilliamElko “当你水平调整大小时，只有 vw 受到影响，而当你垂直调整大小时，只有 vh 受到影响”这就是它的工作原理。我不明白你想要什么。我建议扩大解释你想要什么的问题。
我的意思是说，它不是采用页面的视图高度，而是采用 div 的视图高度，因为它不是页面的大小，而是页面的一部分（20 % 准确的页面高度）。
我希望字体大小与它所在的 div 一致（在本例中为 <div class="div_1">）。而且，很抱歉花了一段时间来回应，我花了一段时间才想到我想要什么。 PS：把1vh改成.2vh。我已经弄清楚了那部分，但是现在我需要弄清楚另一部分。
我正在为另一个答案编写 java 脚本（它将建立这个答案），但这是正确的方法。如果我发布答案，您会检查吗？另外，感谢您的帮助！

【解决方案3】：

不，没有这样的单元，但也许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/

【讨论】：

但是，我认为这个单元不适用于 IE 或 Edge。我知道 vmax 有效。
IE 和 Edge 支持 vmin。他们不支持vmax。
这解决了这个问题，但是当水平调整大小（缩小）时，它不会使 div 中的元素保持居中。我该如何解决？