SCSS响应式布局技术问询：如何根据匹配的@media查询调用对应@mixin设置全局变量

你遇到的核心问题其实是SCSS变量是预编译阶段确定的，而媒体查询是浏览器运行时才会响应的逻辑。你的代码里，两个@media块中的setvariables混入（mixin）会在SCSS编译成CSS的时候依次执行——最后执行的桌面端混入会直接覆盖之前移动端的全局变量赋值，所以最终编译出的CSS里，$page-header-height只会是桌面端的90px，移动端的设置根本不会在浏览器运行时生效。

另外你提到的body标签其实完全没必要：SCSS全局变量的作用域是整个文件，不管你把混入调用嵌套在哪个选择器里，编译时都会执行变量赋值操作，和body选择器没有任何关系。

下面给你两种可行的解决方案，推荐第一种：

方案一：使用CSS自定义属性（推荐） #

CSS自定义属性（也就是常说的CSS变量）是浏览器运行时解析的，可以完美适配媒体查询的动态切换需求。你只需要把原来的SCSS全局变量换成CSS变量，然后在媒体查询中修改这些变量即可：

// 定义默认的CSS变量（在:root全局作用域）
:root {
  --page-header-height: 45px;
  --page-subheader-height: 45px;
  --page-footer-height: 50px;
}

$screen-size-mobile: 360px;
$screen-size-tablet: 600px;

// 移动端媒体查询：覆盖CSS变量
@media screen and (min-width: $screen-size-mobile) {
  :root {
    --page-header-height: 50px;
    --page-subheader-height: 50px;
  }
}

// 桌面端媒体查询：覆盖CSS变量
@media screen and (min-width: $screen-size-tablet) {
  :root {
    --page-header-height: 90px;
    --page-subheader-height: 120px;
  }
}

div.page-wrapper {
  display: grid;
  grid-template-areas: 'page-header' 'page-subheader' 'page-content' 'page-footer';
  grid-template-columns: auto;
  // 直接引用CSS变量
  grid-template-rows: var(--page-header-height) var(--page-subheader-height) 1fr var(--page-footer-height);
  // 现在可以用变量动态计算高度了
  max-height: calc(100vh - var(--page-header-height));
  min-height: calc(100vh - var(--page-footer-height));
  overflow: hidden; // 注意你原来写的是none，CSS中overflow的有效值是hidden/auto/scroll等，none是无效的
}

这种方式的优势是：

• 变量值会随着媒体查询的生效自动更新，完全符合响应式需求
• 可以在任何地方引用这些变量，不需要重复写样式
• 支持动态计算（比如calc里直接用变量）

方案二：将依赖变量的样式放入媒体查询（兼容旧环境） #

如果因为某些原因不能使用CSS变量，你可以把所有依赖这些变量的样式代码，分别放到对应的媒体查询中，让SCSS编译出不同屏幕尺寸下的独立样式：

// 定义默认变量
$page-header-height : 45px;
$page-subheader-height: 45px;
$page-footer-height : 50px;

$mobile-varmap : ("page-header-height" : 50px, "page-subheader-height": 50px);
$desktop-varmap : ("page-header-height" : 90px, "page-subheader-height": 120px);

// 封装生成页面容器样式的混入
@mixin page-wrapper-styles($header-h, $subheader-h, $footer-h) {
  grid-template-rows: $header-h $subheader-h 1fr $footer-h;
  max-height: calc(100vh - $header-h);
  min-height: calc(100vh - $footer-h);
}

$screen-size-mobile: 360px;
$screen-size-tablet: 600px;

// 默认样式（小屏幕）
div.page-wrapper {
  display: grid;
  grid-template-areas: 'page-header' 'page-subheader' 'page-content' 'page-footer';
  grid-template-columns: auto;
  overflow: hidden;
  @include page-wrapper-styles($page-header-height, $page-subheader-height, $page-footer-height);
}

// 移动端样式覆盖
@media screen and (min-width: $screen-size-mobile) {
  div.page-wrapper {
    @include page-wrapper-styles(
      map-get($mobile-varmap, "page-header-height"),
      map-get($mobile-varmap, "page-subheader-height"),
      $page-footer-height
    );
  }
}

// 桌面端样式覆盖
@media screen and (min-width: $screen-size-tablet) {
  div.page-wrapper {
    @include page-wrapper-styles(
      map-get($desktop-varmap, "page-header-height"),
      map-get($desktop-varmap, "page-subheader-height"),
      $page-footer-height
    );
  }
}

这种方式的缺点是如果有多个元素依赖这些变量，你需要在每个媒体查询中重复编写样式（或通过混入减少重复），但胜在兼容性更好（支持不兼容CSS变量的旧浏览器）。

内容的提问来源于stack exchange，提问作者Basil Bear