css实现文字大小随着页面大小变化而改变大小

css实现文字大小随着页面大小变化而改变大小<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Docume

静尾

19014人浏览 · 2020-12-28 10:00:57

静尾 · 2020-12-28 10:00:57 发布

css实现文字大小随着页面大小变化而改变大小

两种方法：

视口宽度百分比：vw

	<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.div1 {
			font-size: 1vw;
		}
	</style>
</head>
<body>
	<div class="div1">我是div1</div>
</body>
</html>

vw不懂的参考文章：通俗易懂——css长度单位：px、em、rem、vh、vw、in、…

媒体查询 + rem

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		html {
			font-size: 30px;
		}
		@media (max-width: 1400px) {
			html {
				font-size: 25px;
			}
		}
		@media (max-width: 1200px) {
			html {
				font-size: 20px;
			}
		}
		@media (max-width: 992px) {
			html {
				font-size: 15px;
			}
		}
		@media (max-width: 768px) {
			html {
				font-size: 10px;
			}
		}
		.div1 {
			font-size: 1rem;
		}
	</style>
</head>
<body>
	<div class="div1">我是div1</div>
</body>
</html>