Question

我创建了一个网站，我希望标题<h1>调整其大小以及<header>的宽度。我使用了vw属性。但该属性在firefox中不起作用，因为显示的字体大小非常小。

你可以在这个小提琴中看到我的意思。如果你在firefox中运行这个小提琴，你会看到小字体。

Body {
  background: white;
  font-family: "Myriad Pro";
  size: 12px;
  color: #323232;
}
header {
  position: relative;
  width: auto;
  height: auto;
  max-height: 239px;
  min-height: inherit;
  background: #d1d2d4;
  overflow: hidden;
}
header h1 {
  font-family: "Arial";
  font-size-adjust: 0.10;
  font-size: 5vw;
  color: black;
  position: absolute;
  left: 13.5%;
  top: 25%;
}
header p {
  font-family: "Myriad Pro";
  font-size-adjust: 0.10;
  font-size: 2vw;
  color: #404041;
  position: absolute;
  left: 13.5%;
  top: 64%;
  letter-spacing: 2pt;
}

<header>
  <img src="images/Logo.png" style="margin-left:2.5%; margin-top:2.5%; width:10%; height:inherit;" />
  <h1 style="">Website®</h1>
  <p>Welcome To My Website!</p>
  <img src="http://tinyurl.com/ku6cgpy" style="align: right; float:right; width:40%; height:auto; overflow-style:auto; overflow:visible;" />
</header>

The Fiddle

有人能告诉我我做错了什么吗？

Answer 1

从您的css中删除font-size-adjust: 0.1

这是Fiddle

Answer 2

删除font-size-adjust: 0.1

中的header h1

Body {
  background: white;
  font-family: "Myriad Pro";
  size: 12px;
  color: #323232;
}
header {
  position: relative;
  width: auto;
  height: auto;
  max-height: 239px;
  min-height: inherit;
  background: #d1d2d4;
  overflow: hidden;
}
header h1 {
  font-family: "Arial";
  
  font-size: 5vw;
  color: black;
  position: absolute;
  left: 13.5%;
  top: 25%;
}
header p {
  font-family: "Myriad Pro";
  font-size-adjust: 0.10;
  font-size: 2vw;
  color: #404041;
  position: absolute;
  left: 13.5%;
  top: 64%;
  letter-spacing: 2pt;
}

<header>
  <img src="images/Logo.png" style="margin-left:2.5%; margin-top:2.5%; width:10%; height:inherit;" />
  <h1 style="">Website®</h1>
  <p>Welcome To My Website!</p>
  <img src="http://tinyurl.com/ku6cgpy" style="align: right; float:right; width:40%; height:auto; overflow-style:auto; overflow:visible;" />
</header>

firefox中的字体大小非常小

2 个答案: