CSS 媒体查询：从入门到精通，打造跨设备完美体验

在当今移动互联网时代，用户访问网站的设备早已不再局限于桌面电脑，手机、平板等各种屏幕尺寸的设备层出不穷。为了确保用户在不同设备上都能获得良好的浏览体验，响应式网页设计应运而生。而 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时