如何在React项目中使用媒体查询语法区分不同尺寸屏幕？

以下是根据你指定的断点（小屏≤575px、中屏≤990px、大屏>990px）修改后的代码实现：

修改后的 App.js 文件 #

import React from 'react';
import './style.css';

export default function App() {
  return (
    <div className="container">
      <h1>响应式布局演示</h1>
      <div className="responsive-box">
        当前屏幕尺寸对应的样式已生效
      </div>
    </div>
  );
}

配套的 style.css 文件 #

.container {
  margin: 0 auto;
  padding: 20px;
  max-width: 1200px;
}

/* 大屏样式（默认，适用于宽度>990px的屏幕） */
.responsive-box {
  font-size: 20px;
  background-color: #2ecc71;
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

/* 中屏样式（适用于宽度≤990px且>575px的屏幕） */
@media (max-width: 990px) {
  .responsive-box {
    font-size: 18px;
    background-color: #3498db;
    padding: 25px;
  }
}

/* 小屏样式（适用于宽度≤575px的屏幕） */
@media (max-width: 575px) {
  .responsive-box {
    font-size: 16px;
    background-color: #f39c12;
    padding: 20px;
  }
}

断点逻辑说明 #

• 大屏：默认样式，自动适配宽度大于990px的设备
• 中屏：通过@media (max-width: 990px)覆盖大屏样式，适配576px-990px的设备
• 小屏：通过@media (max-width: 575px)覆盖前两者样式，适配≤575px的设备

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