React中如何根据父组件设备选择切换子元素媒体查询

问题根源 #

媒体查询（@media）是基于浏览器全局视口宽度触发的，和父容器的宽度无关。所以哪怕你把预览容器缩到320px，只要浏览器窗口本身大于子组件的sm断点，子组件的桌面/平板样式依然会生效，只有手动调整浏览器窗口时，视口宽度变化才会触发媒体查询切换样式。

方案1：用iframe模拟独立视口（推荐） #

利用iframe的独立视口特性，让子组件的媒体查询基于iframe的宽度触发，完全复刻Chrome设备工具栏的效果，且不需要修改子组件代码。

代码实现 #

import { useEffect, useRef } from 'react';
import ReactDOMServer from 'react-dom/server';
import { cx } from 'your-classname-library'; // 替换成你实际用的类名工具
import StatisticsComponent from './StatisticsComponent';

const ResponsivePreview = ({ value }) => {
  const iframeRef = useRef(null);

  // 定义各设备的标准尺寸
  const deviceDimensions = {
    Desktop: { width: '100%', height: '100%' },
    Tablet: { width: '768px', height: '1024px' },
    Mobile: { width: '320px', height: '568px' }
  };
  const currentSize = deviceDimensions[value];

  // 把当前页面的样式同步到iframe，确保子组件样式生效
  useEffect(() => {
    if (!iframeRef.current) return;
    const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
    
    // 复制页面所有样式表到iframe
    Array.from(document.styleSheets).forEach(sheet => {
      try {
        const cssContent = Array.from(sheet.cssRules).map(r => r.cssText).join('');
        const styleElement = document.createElement('style');
        styleElement.textContent = cssContent;
        iframeDoc.head.appendChild(styleElement);
      } catch (e) {
        // 跨域样式无法复制，可忽略或单独引入对应样式文件
      }
    });
  }, []);

  // 切换设备时更新iframe内容
  useEffect(() => {
    if (!iframeRef.current) return;
    const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
    // 渲染子组件到iframe
    iframeDoc.body.innerHTML = ReactDOMServer.renderToString(<StatisticsComponent />);
    // 重置iframe body样式，避免默认边距
    iframeDoc.body.style.margin = '0';
    iframeDoc.body.style.padding = '0';
  }, [value]);

  return (
    <div className={cx('responsive__outercontainer')}>
      <iframe
        ref={iframeRef}
        className={cx(`responsive__iframe-${value}`)}
        style={{ 
          width: currentSize.width, 
          height: currentSize.height, 
          border: 'none',
          boxShadow: value !== 'Desktop' ? '0 4px 12px rgba(0,0,0,0.15)' : 'none'
        }}
        sandbox="allow-same-origin"
      />
    </div>
  );
};

export default ResponsivePreview;

配套CSS #

.responsive__outercontainer {
  min-height: 600px;
  background-color: $color-concrete;
  padding: rem(40px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.responsive__iframe-Desktop {
  width: 100%;
  height: 100%;
}

方案2：父容器类强制覆盖样式 #

如果不想用iframe，可以通过父容器的设备类，用更高优先级的CSS规则覆盖子组件的媒体查询样式：

/* 移动端预览时强制应用子组件的移动端样式 */
.responsive__innercontainer-Mobile .statistics__item {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}

.responsive__innercontainer-Mobile .statistics__innercontainer {
  padding: rem(24px) !important;
  padding-bottom: rem(40px) !important;
}

.responsive__innercontainer-Mobile .statistics__disclaimer,
.responsive__innercontainer-Mobile .statistics__chevron-link .statistics__link-title {
  margin-bottom: 0 !important;
}

/* 平板预览时强制应用子组件的平板样式 */
.responsive__innercontainer-Tablet .statistics__item {
  max-width: calc(50% - 12px) !important;
  flex-basis: calc(50% - 12px) !important;
}

.responsive__innercontainer-Tablet .statistics__container {
  column-gap: rem(24px) !important;
}

这种方法需要手动覆盖所有子组件的响应式样式，适合子组件样式较少的场景；iframe方法则更通用，无需逐个适配样式。

内容的提问来源于stack exchange，提问作者Nidhin Kumar