1. 媒体查询

在 CSS 3 中，媒体查询可根据设备宽度和方向等差异来改变页面的显示方式；媒体查询由媒体类型和条件表达式构成；
例子：使用媒体查询的示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
		<style>
			.example {
			    padding: 20px;
			    color: white;
			}
			@media only screen and (max-width: 599px) {
			    .example {background: red;}
			}
			@media only screen and (min-width: 600px) {
			    .example {background: green;}
			}
			@media only screen and (min-width: 768px) {
			    .example {background: blue;}
			} 
			@media only screen and (min-width: 992px) {
			    .example {background: orange;}
			} 
			@media only screen and (min-width: 1200px) {
			    .example {background: pink;}
			}
		</style>
	</head>
	<body>
		<h5>使用媒体查询示例</h5>
		<p class="example">调用浏览器窗口宽度，查询段落背景的变化（共五种）。</p>
	</body>
</html>

20220106
注意：

媒体查询作为特定条件下的 CSS 样式应用；
作为媒体类型的 screen，可以省略；
使用 min-width 或 max-width 来检测媒体尺寸，类似分段函数，存在 CSS 样式的覆盖；

原文链接：https://blog.csdn.net/weixin_43960383/article/details/122791485