在当今移动互联网时代，用户访问网站的设备早已不再局限于桌面电脑，手机、平板等各种屏幕尺寸的设备层出不穷。为了确保用户在不同设备上都能获得良好的浏览体验，响应式网页设计应运而生。而 CSS 媒体查询，正是实现响应式设计的核心技术之一。
一、什么是 CSS 媒体查询？
简单来说，CSS 媒体查询 (Media Queries) 是一种 CSS 技术，它允许你根据设备的特定特性（如屏幕宽度、高度、设备方向等）来应用不同的样式规则。这意味着你可以为不同的设备定制不同的布局、字体大小、图片尺寸等，从而实现网页的响应式布局。
二、CSS 媒体查询的基本语法
创建媒体查询
@media 媒体目标 and 条件 ...
使用 @media 关键字，配合条件可以让网页在特定设备的特定条件下显示不同的效果。常用于响应式布局。
-
媒体目标：指定媒体类型，例如
screen(屏幕)、print(打印) 等。最常用的是screen，可以省略。 -
条件：指定媒体特性，例如
max-width(最大宽度)、min-width(最小宽度)、orientation(方向) 等。 -
orientation: landscape横向 portrait纵向
常用的媒体特性
以下是一些常用的媒体特性：
-
width / height: 视口（viewport）的宽度/高度
-
max-width / max-height: 视口（viewport）的最大宽度/高度
-
min-width / min-height: 视口（viewport）的最小宽度/高度
-
orientation: 设备方向，
landscape(横屏) 或portrait(竖屏) -
resolution: 设备分辨率
案例
.dataDiv{width: 900px;border:1px salmon solid;margin: auto;display: flex;flex-wrap: wrap;justify-content: space-evenly;}.box{width: 250px;height: 200px;background-color: antiquewhite;margin-top: 20px;}/* max-width:1000px 最大宽度到多少的时候 =0~1000px *//* min-width:1000px 最小宽度到多少的时候 =1000~屏幕的极限 *//* 当屏幕尺寸小于600px的时候，box的颜色变成橘色 */@media screen and (max-width:600px){.dataDiv{width: 480px;}.box{background-color: orange;width: 80%;}}/* 当屏幕尺寸大于600，小于9000的时候，box的颜色为紫色 */@media screen and (min-width:600px) and (max-width:900px){.dataDiv{width: 600px;}.box{width: 40%;background-color: purple;}}/* 当屏幕尺寸大于1000px的时候 */@media screen and (min-width:1000px){.dataDiv{width: 900px;}.box{width: 250px;background-color: skyblue;}}<!-- 核心：判断不同尺寸的时候，css用哪一套 --><div class="dataDiv"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>运行结果：
屏幕尺寸大于1000px时
屏幕尺寸大于600px，小于900px时
屏幕尺寸小于600px时
❗❗注意：可以用外联式来引用css的样式，添加一个media属性设媒体目标和条件，使得代码不混乱，结果清晰。
三、CSS 媒体查询的最佳实践
-
移动优先: 建议优先编写针对移动设备的样式，然后使用媒体查询为更大的屏幕添加样式。
-
使用相对单位: 使用
em、rem、%等相对单位，可以使你的布局更加灵活。 -
避免过度使用: 不要为每个细微的屏幕尺寸差异都创建媒体查询，这会导致代码臃肿，难以维护。
四、总结
CSS 媒体查询是实现响应式网页设计的重要工具，它可以帮助你创建出适应不同设备的网页，为用户提供更好的浏览体验。通过学习和掌握 CSS 媒体查询，你可以打造出更加专业、用户体验更佳的网站。
