当页面100%缩放时，CSS Media Query无法工作

是因为CSS Media Query是根据设备的视口宽度或高度来应用不同的样式规则。当页面缩放比例为100%时，视口宽度和高度与设备的实际宽度和高度相同，因此CSS Media Query无法检测到任何变化，无法触发相应的样式规则。

CSS Media Query通常用于响应式设计，以适应不同设备和屏幕尺寸。它可以根据设备的特性和屏幕尺寸应用不同的样式，从而提供更好的用户体验。

解决这个问题的方法是使用JavaScript来检测页面缩放比例，并根据检测结果动态地添加或移除相应的CSS类。通过JavaScript可以获取到页面的缩放比例，然后根据不同的缩放比例来应用不同的样式规则。

以下是一个示例的JavaScript代码，用于检测页面缩放比例并添加相应的CSS类：

// 检测页面缩放比例
function detectZoom() {
  var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
  }

  if (ratio) {
    ratio = Math.round(ratio * 100);
  }

  return ratio;
}

// 添加或移除CSS类
function handleZoom() {
  var zoomLevel = detectZoom();
  var body = document.getElementsByTagName('body')[0];

  if (zoomLevel === 100) {
    body.classList.add('zoom-100');
  } else {
    body.classList.remove('zoom-100');
  }
}

// 监听窗口大小变化事件
window.addEventListener('resize', handleZoom);

// 页面加载完成时执行一次
window.addEventListener('load', handleZoom);

在上述代码中，detectZoom函数用于检测页面缩放比例，handleZoom函数根据缩放比例添加或移除CSS类，resize事件和load事件用于监听窗口大小变化和页面加载完成时执行相应的操作。

通过上述方法，可以在页面缩放比例为100%时添加一个名为zoom-100的CSS类，然后可以在CSS中使用该类来应用相应的样式规则。

请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和调整。

腾讯云相关产品和产品介绍链接地址：