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时