新手求助：如何使用ReactJS实现网站桌面与移动端响应式设计

Hey there! As someone who started out as a React newbie figuring out responsive design myself, I’ve got some practical, easy-to-follow tips to help you build sites that work great on both desktop and mobile. Let’s dive in:

You can’t go wrong with good old media queries—they’re the foundation of responsive design. Whether you’re using plain CSS, Sass, or CSS-in-JS, they work seamlessly with React.

Here’s a desktop-first example in plain CSS:

/* Default styles for desktop */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Adjust for mobile screens (max 768px wide) */
@media (max-width: 768px) {
  .page-container {
    padding: 0 1rem;
  }
}

If you prefer CSS-in-JS (like styled-components), you can nest media queries directly in your styled components:

import styled from 'styled-components';

const PageContainer = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;

  @media (max-width: 768px) {
    padding: 0 1rem;
  }
`;

function App() {
  return <PageContainer>My responsive content</PageContainer>;
}

Sometimes you need to render entirely different components based on screen size—this is where React-focused libraries shine. My go-to is react-responsive:

First install it:

npm install react-responsive

Then use the useMediaQuery hook to conditionally render UI:

import { useMediaQuery } from 'react-responsive';

function Navbar() {
  const isMobile = useMediaQuery({ maxWidth: 768 });

  return (
    <nav className="navbar">
      {/* Show hamburger menu on mobile, full nav on desktop */}
      {isMobile ? (
        <button className="menu-toggle">☰</button>
      ) : (
        <ul className="nav-links">
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      )}
    </nav>
  );
}

• Conditional Rendering: As shown above, swap out components based on screen size. For example, use a compact mobile footer vs. a detailed desktop footer.
• Responsive Props: Pass size-specific props to components to adjust their behavior:

function HeroButton({ variant }) {
  const buttonClass = variant === 'mobile' ? 'btn-small' : 'btn-large';
  return <button className={`hero-btn ${buttonClass}`}>Get Started</button>;
}

// In your parent component
function HeroSection() {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  return (
    <div className="hero">
      <HeroButton variant={isMobile ? 'mobile' : 'desktop'} />
    </div>
  );
}

• Flexbox & Grid for Fluid Layouts: Use CSS Flexbox or Grid to create layouts that automatically adjust. For example, a card grid that turns into a single column on mobile:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

• Use Chrome DevTools’ Device Toolbar (press Ctrl+Shift+M or Cmd+Shift+M) to simulate different screen sizes and orientations.
• Test on real devices if you can—simulators don’t always capture touch interactions or real-world performance.
• Ensure interactive elements (buttons, links) are at least 48x48px on mobile to avoid accidental taps.

• Don’t over-rely on JavaScript: Media queries should handle most layout adjustments—use JS only for dynamic component swaps.
• Ditch hard-coded pixels: Use relative units like rem, em, or % instead of px to make your design adapt to different font sizes and screen densities.
• Optimize for mobile performance: Lazy-load non-critical components with React.lazy and Suspense, and use responsive images (with srcset) to avoid loading large desktop images on mobile.

Take it slow—start with a simple layout using media queries, then add in React-specific tools as you get comfortable. You’ll be building fully responsive React sites before you know it!

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