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

最新推荐文章于 2024-08-15 09:01:33 发布

静尾

最新推荐文章于 2024-08-15 09:01:33 发布

阅读量1.8w

点赞数 8

分类专栏： CSS其实如此强大文章标签： css css3

本文链接：https://blog.csdn.net/qq_41176306/article/details/111831195

版权

CSS其实如此强大专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>