React作品集网站响应式问题：500px以下媒体查询未生效

我正在用React开发个人作品集网站，桌面端视图已完成，目前在适配平板和移动端。我设置了媒体查询：当屏幕宽度小于500px时，将.about-info容器的flex-direction改为column，让内部元素纵向排列，但调整屏幕尺寸后完全没效果，.about-info下的.about-text和.about-skills两个子元素仍保持横向排列。

相关代码 #

About.jsx #

import React from "react";
import Button from '@mui/material/Button';
import "./About.css";

function About() {
    return (
        <div>
            <div id="about-me">
                <div className="about-heading">
                    <h1> About Me</h1>
                </div>

                <div className="about-info">
                    <div className="about-text">
                        <p>I'm a Computer science student at  Centurion University of Technology and Management.
                            I have a passion for <b>Full stack development</b> and <b>UI/UX design</b> with knowledge of data structures and algorithms.
                            I am graduating in 2024, and I am actively seeking a <b>Job</b> opportunity as a Full-stack developer
                            to apply my skills and contribute to a dynamic and innovative team.. </p>

                        <p>I have a strong understanding of the full stack development lifecycle and also proficient in
                            UI/UX design principles and can use <b>Figma</b> to create wireframes and prototypes.</p>

                        <p>I am a highly motivated and results-oriented individual. I am always eager to learn new things and take on
                            new challenges. I am also a <b>Team</b> player and I am able to work effectively with others to achieve common goals. </p>

                        <a href="#contact" ><Button variant="contained" className="contact-button">Contact Me</Button></a>
                    </div>

                    <div className="about-skills">
                        <div>
                            <h2>Skills</h2>
                        </div>
                        <p>HTML</p> <p>CSS</p> <p>JAVASCRIPT</p> <p>REACT</p> <p>NODE JS</p> <p>EXPRESS JS</p>
                        <p>MONGO DB</p> <p>MY SQL</p> <p>GIT</p> <p>GIT HUB</p>
                        <p>BOOTSTRAP</p> <p>MATERIAL UI</p> <p>FIGMA</p> <p>REST API</p>

                    </div>

                </div>


            </div>
        </div>
    )
}

export default About;

About.css #

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&family=Poppins:wght@300;400;500;600;800&display=swap");

@media (max-width:500px){
  .about-info{
    flex-direction: column;
  }
}

#about-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3vh 1vw;
  gap: 1vh;
  background-color: #ffffff;
  padding-top: 70px;
  padding-bottom: 7%;
}

.about-heading {
  display: flex;
  justify-content: center;
  margin: 3vh 3vw;
  position: relative;
}

.about-heading::after {
  content: "";
  height: 0.8vh;
  width: 3vw;
  position: absolute;
  background: rgb(16, 238, 60);
  background: linear-gradient(
    90deg,
    rgba(16, 238, 60, 1) 0%,
    rgba(20, 81, 231, 1) 0%
  );
  bottom: -1vh;
  border-radius: 5px;
}

.about-heading h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  justify-items: center;
}

.about-info {
  display: flex;
  gap: 1vw;
}

.about-text {
  font-family: "Poppins", sans-serif;
  max-width: 55%;
  margin: 2vh 2vw;
}

.about-text Button {
  transition: transform 0.3s ease;
}

.about-text Button:hover {
  transform: translateY(-5px);
}

.about-text p {
  padding: 1vh 2vw;
  color: #666666;
}

.about-info .contact-button {
  margin-left: 2vw;
}
.about-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about-skills {
  width: 38%;
  margin: 1vh 1vw;
  text-align: center;
}
.about-skills p {
  padding: 8px 18px;
  display: inline-block;
  background-color: #d7d7d7;
  color: #666666;
  margin: 0.8vw;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  border-radius: 6%;
}

.about-skills h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
b {
  font-weight: bolder;
}

问题根源是CSS代码顺序导致的样式覆盖：你把媒体查询写在了.about-info基础样式的前面，两者选择器优先级完全相同，后面定义的基础样式会覆盖媒体查询里的规则。

修复步骤： #

1. 调整媒体查询位置：将媒体查询块移到CSS文件的最末尾，确保满足条件时媒体查询样式能覆盖基础样式，同时补充移动端适配的子元素宽度规则：

/* 把这段移到CSS文件最后 */
@media (max-width:500px){
  .about-info{
    flex-direction: column;
    align-items: center; /* 可选：让子元素居中对齐，优化视觉效果 */
  }
  /* 移动端下让子元素占满容器宽度，避免留白 */
  .about-text {
    max-width: 100%;
  }
  .about-skills {
    width: 100%;
  }
}

2. 验证效果：调整屏幕宽度到500px以下，.about-text和.about-skills会自动纵向排列，且子元素铺满容器，适配移动端布局。

原理说明 #

CSS遵循「后来居上」的规则，当两个选择器优先级相同时，后定义的样式会覆盖先定义的。把媒体查询放在最后，当屏幕宽度满足条件时，媒体查询中的flex-direction: column就能覆盖基础样式的默认flex-direction: row，从而生效。

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