如何结合em单位使用媒体查询，根据字体大小调整页面布局？

嘿，我太懂你这种困惑了！明明想着把媒体查询换成em，就能让布局跟着字体大小一起适配，结果改完啥变化都没有，简直挠头😅

问题出在哪？ #

你踩了一个很容易忽略的CSS规范坑：媒体查询里的em/rem单位，始终是基于浏览器的默认字体大小（通常是16px）计算的，完全不受你通过JS设置的<html>元素font-size影响。

举个例子，你写的min-width:35em，不管你把html的font-size改成19px还是30px，这个断点始终是35*16=560px，所以布局自然不会跟着字体大小变化——这就是为啥你改了em之后没效果的原因。

怎么解决？ #

最靠谱的方式是用JS动态计算并更新媒体查询的断点，让断点的像素值跟着当前字体大小一起缩放。下面是针对你的代码修改后的完整方案：

1. 修改JS逻辑，动态生成媒体查询

我们先把原始的断点（基于默认16px的em值）转成px存在变量里，然后每次调整字体大小时，计算缩放比例，生成新的断点px值，再动态写入CSS：

var range = document.getElementById("range");
var html = document.querySelector("html");
var font = document.querySelector(".font-label");

// 保存原始断点（基于浏览器默认16px的em转px）
const originalBreakpoints = {
  large: 35 * 16,  // 对应原35em
  medium: 25 * 16, // 对应原25em
  small: 15 * 16   // 对应原15em
};

// 创建一个动态style标签，用来存放实时更新的媒体查询
let dynamicStyle = document.createElement('style');
document.head.appendChild(dynamicStyle);

range.oninput = function () {
  const currentFontSize = parseInt(this.value);
  // 计算当前字体相对于默认16px的缩放比例
  const scale = currentFontSize / 16;
  
  // 设置根元素字体大小
  html.style.setProperty("font-size", currentFontSize + "px");
  font.innerHTML = "<p>Font size is: " + currentFontSize + "px</p>";
  
  // 计算新的断点：原始断点px * 缩放比例
  const newBreakpoints = {
    large: originalBreakpoints.large * scale,
    medium: originalBreakpoints.medium * scale,
    small: originalBreakpoints.small * scale
  };
  
  // 生成动态媒体查询CSS
  const dynamicCSS = `
    @media only screen and (min-width: ${newBreakpoints.large}px) {
      .folders { grid-template-columns: repeat(5, 1fr); }
    }
    @media only screen and (min-width: ${newBreakpoints.medium}px) and (max-width: ${newBreakpoints.large}px) {
      .folders { grid-template-columns: repeat(4, 1fr); }
    }
    @media only screen and (min-width: ${newBreakpoints.small}px) and (max-width: ${newBreakpoints.medium}px) {
      .folders { grid-template-columns: repeat(3, 1fr); }
    }
    @media only screen and (max-width: ${newBreakpoints.small}px) {
      .folders { grid-template-columns: repeat(2, 1fr); }
    }
  `;
  
  // 更新动态style标签的内容
  dynamicStyle.innerHTML = dynamicCSS;
};

// 页面加载时初始化一次，确保默认字体下布局正确
range.oninput();

2. 保留原CSS的基础样式（移除原媒体查询）

把你原来.folders里的媒体查询删掉，只保留基础样式：

.folders {
  display: grid;
  gap: 0.75em;
  padding: 0.75em;
  .folder {
    padding: 0.75em;
    width: 100%;
  }
}

为啥这样能行？ #

现在每次调整字体大小，JS都会重新计算断点的像素值——比如当你把字体调到30px（缩放比例30/16=1.875），原来的35em断点就会变成560*1.875=1050px，这样布局就会在1050px的屏幕宽度下触发5列布局，和字体大小的缩放比例完全匹配。

小提示 #

• 把原始断点存在变量里，后续要修改断点时直接改originalBreakpoints就行，不用到处找媒体查询
• 测试时多试几个字体大小，确认不同尺寸下的布局都能正确触发

内容来源于stack exchange