html - 为什么我的字体大小不会相对于屏幕大小发生变化？

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

But when I change the size of my window, my font size does not change.

em 单位确实是相对的，但是，它们不是相对于视口(viewport)，而是 - 相对于父元素的计算字体大小(当在 font-size 属性上设置时) - 当然不'调整视口(viewport)大小时改变

因此，如果您希望字体大小随视口(viewport)而变化，您有两个选择:

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

2) 使用视口(viewport)单位 eg: font-size: 2vw;