<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example { background-color: lightgrey;
padding: 20px;
}
@media screen and (min-width: 600px) { div.example { font-size: 80px;
}
}
@media screen and (max-width: 600px) { div.example { font-size: 30px;
}
}
</style>
</head>
<body>
<h1>在不同的屏幕尺寸上更改元素的字体大小</h1>
<div class="example">Example DIV.</div>
<p>当浏览器的宽度为 600 像素或更小时，将 DIV 的字体大小设置为 30px。当它是 601 像素或更宽时，将字体大小设置为 80 像素。请调整浏览器窗口的大小以查看效果。</p>
</body>
</html>