When developing web pages with React and TypeScript, to achieve mobile adaptation (i.e., responsive design), mainstream approaches typically combine CSS techniques with modern frontend development best practices. Here are some common implementation methods and steps for your reference:

1. Using CSS Media Queries

Media queries are the core of responsive design. You can adjust styles based on device screen width, height, or characteristics.

/* Base style */
.container {
  padding: 20px;
  font-size: 16px;
}

/* Mobile adaptation (e.g., when screen width is less than 768px) */
@media (max-width: 768px) {
  .container {
    padding: 10px;
    font-size: 14px;
  }
}

In React, you can write these styles in CSS files and apply them to components using className.

2. CSS Unit Selection (rem, vw, % etc.)

  • Use relative units (such as rem, vw, vh, %) instead of fixed units (such as px), so they can adjust dynamically according to screen size.
  • For example: 
    .title {
  font-size: 2rem; /* Relative to root element font size */
  width: 90vw; /* 90% of viewport width */
}

3. Fluid Layouts (Flexbox and Grid)

Flexbox and CSS Grid are powerful layout tools that can easily achieve adaptive designs.

  • Flexbox example: 
      
const Container: React.FC = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <div style={{ flex: 1 }}>Item 1</div>
      <div style={{ flex: 1 }}>Item 2</div>
    </div>
  );
};

    On small screens, you can adjust flex-direction to row or other styles through media queries.

  • Grid example: 
    .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

    auto-fit and minmax allow the grid to automatically adjust the number of columns based on screen size.

4. Using CSS Frameworks

Mainstream CSS frameworks (such as Tailwind CSS, Bootstrap, or Material-UI) have built-in responsive design support, which is ideal for React projects.

  • Tailwind CSS example: 
      
const App: React.FC = () => {
  return (
    <div className="p-4 md:p-8 lg:p-12">
      <h1 className="text-lg md:text-xl lg:text-2xl">Hello World</h1>
    </div>
  );
};
  • Material-UI example: 
      
import { Box, Typography } from '@mui/material';

const App: React.FC = () => {
  return (
    <Box 
      sx={{ padding: { xs: 2, sm: 4, md: 6 } }}
    >
      <Typography variant="h4" sx={{ fontSize: { xs: '1.5rem', md: '2rem' } }}>
        Hello World
      </Typography>
    </Box>
  );
};

5. Dynamic Device Detection (useMediaQuery or window.matchMedia)

In React, you can use hooks or native APIs to dynamically detect screen size and render different components or styles based on conditions.

  • Using useMediaQuery (as provided by MUI): 
      
import { useMediaQuery } from '@mui/material';

const App: React.FC = () => {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <div>
      {isMobile ? <p>Mobile View</p> : <p>Desktop View</p>}
    </div>
  );
};
  • Native approach: 
      
const useIsMobile = () => {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return isMobile;
};

6. Mobile-First Design

Start designing from mobile and then gradually expand to larger screens through media queries:

/* Default style for mobile */
.container {
  padding: 10px;
  font-size: 14px;
}

/* Tablet and above */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

7. Testing and Tools

  • Use browser developer tools (such as Chrome DevTools) to simulate different devices.
  • Test on real mobile phones to ensure consistent experience.
  • You can use tools like react-responsive to simplify responsive logic: 
      
import { useMediaQuery } from 'react-responsive';

const App: React.FC = () => {
  const isMobile = useMediaQuery({ maxWidth: 768 });

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
};

Mainstream Practice Summary

  1. Recommended Technology Stack:
    • React + TypeScript + Tailwind CSS (lightweight, flexible)
    • Or React + TypeScript + Material-UI (rich in components)
  2. Process:
    • First design the mobile layout.
    • Use Flexbox/Grid to implement fluid layouts.
    • Adjust large screen styles through media queries or frameworks.
    • Test different resolutions (mobile, tablet, PC).
  3. Considerations:
    • Avoid hardcoding pixel values.
    • Consider touch interactions (such as buttons large enough for finger tapping).
    • Optimize image loading (such as using srcset or sizes with <img>).

Comments