15、利用 Less 实现媒体查询

利用 Less 实现媒体查询

1. 媒体查询简介

在智能手机出现之前，大多数网站都是以固定宽度构建的，以确保在笔记本电脑或个人电脑上有一致的用户体验。然而，随着越来越多的人使用移动设备，设计能在各种设备上无缝显示的内容变得尤为重要。媒体查询应运而生，它是响应式网页设计的重要组成部分，可帮助我们构建能在多个平台上完美显示的网站。

媒体查询通常以 @media 开头，由两部分组成：
- 第一部分确定规则适用的媒体类型，例如 only screen 表示规则仅适用于屏幕显示，打印时的内容可以不同。
- 第二部分是媒体特性，如 (min-width: 530px) and (max-width: 949px) ，表示规则仅适用于屏幕宽度在 530px 到 949px 之间的设备，排除了智能手机，适用于较大的平板电脑、笔记本电脑或个人电脑。

几乎所有现代浏览器都原生支持媒体查询，但 IE 8 及以下版本除外。以下是媒体查询的工作流程：

graph TD;
    A[开始] --> B[设置媒体类型];
    B --> C[设置媒体特性];
    C --> D[检查设备是否匹配];
    D -- 匹配 --> E[应用规则];
    D -- 不匹配 --> F[不应用规则];
    E --> G[结束];
    F --> G;

2. CSS 的局限性

在使用媒体查询时，无论