CSS媒体查询

马黑黑 · 发表于 2025-3-7 13:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-3-7 13:09 编辑

追求完美的web页制作者在设计网页尺寸时应当需要考虑适配不同类型的显示设备。实现响应式布局的方法非常多，其中，基于CSS的媒体查询最值得入手，它经济而高效，除了能令设计对象适配各种大小尺寸的终端显示设备，还有可能响应浏览器窗口的相关变化。

CSS媒体查询可以检查视口宽高、设备宽高、设备的分辨率乃至设备的方向。借助它我们可以让页面或元素的尺寸适应不同尺寸的显示设备。参考下面的代码：

<style>
.div1 {
	margin: 0 auto;
	width: 1200px; /* 宽度预设为1200px */
	height: 460px;
	background: lightblue;
}
/* 屏幕宽度为1280px时 div1的宽度为90%并改变背景色为粉红 */
@media screen and (max-width: 1280px) {
	.div1 {
		width: 90%;
		background: pink;
	}
}
</style>

<div class="div1"></div>

（运行后可以点击浏览器右上方的向下还原/最大化按钮改变浏览器界面大小以观察上面div的变化）

CSS媒体查询需要用到 @media 选择器，简单语法为：

@media 媒体类型 and (媒体属性特征) { css代码 }

代码示例中，媒体类型我们使用 screen，指向屏幕，媒体属性特征我们指定 max-width 即 screen 显示区域的最大宽度，这一部分表示：检查设备的 screen 媒体，若其显示区域最大宽度为1280px，则按随后的CSS代码执行相关行为；而其内的CSS代码，我们针对 .div1 选择器做相关设置，有宽度和背景色。整个媒体查询代码的意思是：以显示设备最大宽度1280px为分界，达到要求的按预设（即宽1200px、背景淡蓝色）渲染 .div1，否则，按其内的属性设置（即90%宽度、粉红背景）渲染。

关于screen，在实际应用中发现，它除了能够检查到应物理设备，也可以检查浏览器的视口，功能相当于甚至强于JS基于window的resize监听事件，这意味着直接改变浏览器窗口的尺寸就可以感受到上述代码实际运行效果，无需切换显示终端。

上述基于@media媒体查询的代码逻辑理解起来可能有点费劲，因为CSS缺乏对应的条件语句。不过可以研读代码，然后亲手测试，慢慢可以体会出来。

css媒体查询不是一个简单的知识系统，它所涉及的媒体类型不少，媒体属性特征更多，但我们常用到的其实只是一小部分，可以根据需要查阅相关知识。