React JS中如何通过媒体查询实现移动端flex布局改为block

针对你当前使用React Bootstrap栅格体系的代码，优先选择和现有技术栈匹配的方案，改造成本最低：

方案1：直接用Bootstrap自带响应式工具类（最推荐，适配你的现有代码） #

你代码里写的d-flex是Bootstrap的全局display工具类，默认在所有屏幕尺寸下生效。Bootstrap本身已经提供了按断点生效的响应式display类，规则是指定断点及以上尺寸生效，更小尺寸回退到低优先级类的样式：

• 你需要的效果是：移动端（<576px，即xs断点）下display: block，sm及以上尺寸保持display: flex
• 只需要把div上原本的d-flex替换成d-block d-sm-flex即可，不需要写任何额外CSS/JS逻辑

改完的代码如下：

<Col sm={8}>
  {/* 仅替换类名：移动端默认block，sm断点以上自动切换为flex */}
  <div className="d-block d-sm-flex">
     <Col md={4} xs={12} className="has-float-label p-0">
     <Label>years</Label>
     <Select
     components={{ Input: CustomSelectInput }}
     className="react-select w-full"
     classNamePrefix="react-select"
     value={selectedDate.year}
     onChange={(value) => setSelectedDate({ ...selectedDate, year: value })}
     options={years}
     placeholder=""
     />
     </Col>     
   </div>
</Col>

方案2：自定义CSS媒体查询（适合不依赖UI框架工具类的场景） #

如果不想用框架预置类，可以给目标div加自定义类名，手写CSS媒体查询实现：

1. 先给div绑定自定义类：

<div className="responsive-flex-box">
 {/* 内部内容保持不变 */}
</div>

2. 编写对应样式：

/* 移动端优先，默认小屏下为block */
.responsive-flex-box {
  display: block;
}
/* 屏幕宽度≥768px（可按需修改断点值）时切换为flex */
@media screen and (min-width: 768px) {
  .responsive-flex-box {
    display: flex;
  }
}

方案3：JS监听媒体查询（适合需要联动业务逻辑的场景） #

如果除了改样式，还要在断点切换时执行其他业务逻辑（比如移动端渲染不同组件、修改交互规则），可以用浏览器原生window.matchMedia API，在React中配合useEffect监听：

import { useState, useEffect } from 'react';

// 可抽成自定义hook全局复用
const useIsMobile = (breakpoint = 768) => {
  const [isMobile, setIsMobile] = useState(
    () => window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches
  );

  useEffect(() => {
    const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const handleChange = (e) => setIsMobile(e.matches);
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, [breakpoint]);

  return isMobile;
};

// 业务组件中使用
function FormComponent() {
  const isMobile = useIsMobile();
  // 其他业务逻辑...
  return (
    <Col sm={8}>
      {/* 根据匹配结果动态绑定样式/类名 */}
      <div style={{ display: isMobile ? 'block' : 'flex' }}>
        {/* 内部内容保持不变 */}
      </div>
    </Col>
  )
}

注意：如果只是纯样式修改，优先选前两种CSS方案，渲染性能比JS监听更好，不要为了改样式强行用JS监听媒体查询。

内容的提问来源于stack exchange，提问作者sepideh bb