为什么我的字体大小相对于屏幕尺寸没有变化？

Question

我使用的是font-size: 4em;，我知道它是相对大小的？但是当我改变窗口的大小时，我的字体大小不会改变。它保持不变并开始重叠并且看起来很丑陋。我所指的文字是“测试题目”

以下是全屏（2560x1440），我很满意

但这就像是半屏幕

在手机上看起来更糟糕。

h1, h2, h3, p {
	color: #39382e;
}

.left h1 {
 	margin-top: 90px;
 	color: gray;
 	font-size: 4em;
 	text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
 }
 
 .left h2 {
 	color: gray;
 	font-size: 1em;
 	margin-top: -50px;
 	font-weight: lighter;
 }

div.left {
  width: 20%;
  display: inline-block;
  overflow: auto;
 } 
 #upperleft, #lowerleft {
 	min-height: 360px;
 	max-height: 361px;
 	max-width: 551px;
 	border: 1px solid white;
 	border-radius: 5px;
 }

		<div class="left">
			<div id="upperleft">
				<h1>Web Design</h1>
				<h2>Put your business online for the world to see</h2>
				<a href="#" class="learnmore">
					<div>Learn More</div>
				</a>
			</div>
			<div id="lowerleft">
				<h1>Contact us</h1>
				<h2>Get a quote or ask us a question today</h2>
				<a href="#" class="learnmore">
					<div>Learn More</div>
				</a>
			</div>
		</div>

Answer 1

  

但是当我改变窗口大小时，我的字体大小不会改变。

确实em单位是相对的，但是，它们不是相对于视口，而是相对于父元素的计算字体大小（当在font-size属性上设置时） - 当然不是＃39;在调整视口大小时更改

因此，如果您希望使用视口更改字体大小，则有两个选项：

1）使用媒体查询根据视口宽度/高度更改基本字体大小（在这种情况下，您可能会在希望其字体大小分别更改的元素上使用rem单位）或

2）使用视口单元，例如：font-size: 2vw;

Answer 2

您尚未为字体大小设置基本尺寸（Select replace(Str(1111111, 12, 2),0,left(11111,1)) 或body）。如果您将html设置为百分位数的相对大小，则应正确调整大小。请记住，即使font-size是相对大小，它仍然需要知道到的相对性。