在前端开发中，实现响应式设计是至关重要的，它能让网页在不同设备和屏幕尺寸下都提供良好的用户体验。CSS 媒体查询和 SCSS 的 @include 指令都在响应式设计中扮演着重要角色，但它们有着不同的特点和使用场景。
CSS 媒体查询
CSS 媒体查询是 CSS3 引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、高度、设备类型、分辨率等）来应用不同的 CSS 样式。通过媒体查询，开发者可以针对不同的设备屏幕尺寸编写不同的样式规则，从而实现网页的响应式布局。
/* 当屏幕宽度小于等于 768px 时应用这些样式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
width: 100%;
padding: 0 15px;
}
}
/* 当屏幕宽度在 769px 到 1024px 之间时应用这些样式 */
@media (min-width: 769px) and (max-width: 1024px) {
body {
font-size: 16px;
}
.container {
width: 90%;
margin: 0 auto;
}
}原生支持
：媒体查询是 CSS 标准的一部分，所有现代浏览器都支持，无需额外的编译步骤，兼容性好。 直观易懂
：代码结构清晰，开发者可以直接在 CSS 文件中看到不同屏幕尺寸下的样式规则，便于维护和理解。 灵活性高
：可以根据各种设备特性进行查询，不仅仅局限于屏幕宽度，还可以结合设备类型、分辨率等进行复杂的查询。
代码重复
：当需要在多个地方应用相同的媒体查询规则时，会出现代码重复的问题，增加了代码量和维护成本。 难以管理
：随着项目的增大，媒体查询规则会越来越多，CSS 文件会变得冗长，难以管理和组织。
SCSS @include
// 定义一个混合器，用于处理小屏幕设备
@mixin small-screen {
@media (max-width: 768px) {
@content;
}
}
// 定义一个混合器，用于处理中等屏幕设备
@mixin medium-screen {
@media (min-width: 769px) and (max-width: 1024px) {
@content;
}
}
// 使用混合器
body {
font-size: 18px;
@include small-screen {
font-size: 14px;
}
@include medium-screen {
font-size: 16px;
}
}
.container {
width: 80%;
margin: 0 auto;
@include small-screen {
width: 100%;
padding: 0 15px;
}
@include medium-screen {
width: 90%;
}
}优点
代码复用
：通过将媒体查询规则封装在混合器中，可以在多个地方重复使用这些规则，避免了代码重复，减少了代码量。 易于维护
：将媒体查询规则集中管理在混合器中，当需要修改某个屏幕尺寸的样式规则时，只需要修改混合器中的代码，而不需要在整个 CSS 文件中查找和修改。 提高开发效率
：使用混合器可以快速应用媒体查询规则，减少了重复编写代码的时间，提高了开发效率。
需要编译
：SCSS 代码需要经过编译才能转换为浏览器可以识别的 CSS 代码，增加了开发流程的复杂度。 学习成本
：对于初学者来说，需要学习 SCSS 的语法和特性，包括混合器、变量、嵌套等，有一定的学习成本。
对比总结
1.使用场景
简单项目
：如果项目规模较小，媒体查询规则较少，直接使用 CSS 媒体查询是一个不错的选择，因为它简单直观，无需额外的编译步骤。 复杂项目
：对于大型项目，尤其是需要在多个地方重复使用媒体查询规则的项目，使用 SCSS 的 @include指令结合混合器可以更好地管理代码，提高开发效率和可维护性。
2.性能方面
在性能上，两者没有本质的区别。CSS 媒体查询是原生支持的，浏览器可以直接解析和应用；SCSS 编译后的代码也是标准的 CSS 代码，最终在浏览器中的表现是一样的。不过，SCSS 编译过程可能会增加一些开发时间，但在生产环境中不会影响页面的加载性能。
3.代码组织
CSS 媒体查询的代码是分散在各个 CSS 选择器中的，随着项目的增大，代码会变得难以组织和管理。而 SCSS 的 @include 指令将媒体查询规则封装在混合器中，代码更加集中和模块化，便于管理和维护。
