如何使用React + Styled Components实现桌面应用CSS响应式？

结合你已经在使用的vw、vh、%、em等单位，以下是几种实用的实现思路：

1. 封装媒体查询工具函数 #

Styled Components支持在模板字符串中直接编写媒体查询，提前定义桌面端断点常量，能让样式代码更简洁易维护：

// 定义桌面端断点
const breakpoints = {
  largeDesktop: '1440px',
  mediumDesktop: '1024px',
  smallDesktop: '768px'
};

// 封装媒体查询模板
const media = {
  largeDesktop: `@media (max-width: ${breakpoints.largeDesktop})`,
  mediumDesktop: `@media (max-width: ${breakpoints.mediumDesktop})`,
  smallDesktop: `@media (max-width: ${breakpoints.smallDesktop})`
};

// 在组件中使用
import styled from 'styled-components';

const AppContainer = styled.div`
  width: 75vw;
  margin: 0 auto;
  padding: 2em;

  ${media.mediumDesktop} {
    width: 85vw;
    padding: 1.5em;
  }

  ${media.smallDesktop} {
    width: 92vw;
    padding: 1em;
  }
`;

2. 优化现有单位的响应式逻辑 #

基于你已用的单位，结合媒体查询做针对性调整：

• vw/vh：适合全局布局尺寸，但在小桌面断点可切换为固定值避免元素过小
• em/rem：配合根字体大小的响应式调整，实现全局间距的联动变化

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  html {
    font-size: 16px; // 基础字体大小

    ${media.mediumDesktop} {
      font-size: 14px;
    }

    ${media.smallDesktop} {
      font-size: 12px;
    }
  }
`;

// 组件内用em，会随根字体自动缩放
const Button = styled.button`
  padding: 0.8em 1.6em;
  font-size: 1em;

  ${media.smallDesktop} {
    padding: 0.7em 1.4em;
  }
`;

3. 组件级动态样式切换 #

当纯CSS响应式不够时，结合React的状态监听窗口尺寸，实现更灵活的样式控制：

import { useState, useEffect } from 'react';
import styled from 'styled-components';

const Sidebar = styled.aside`
  width: ${props => props.isSmallDesktop ? '25%' : '30%'};
  background-color: #f5f5f5;
`;

function Layout() {
  const [isSmallDesktop, setIsSmallDesktop] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsSmallDesktop(window.innerWidth <= 1024);
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化执行一次

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      <Sidebar isSmallDesktop={isSmallDesktop} />
      {/* 其他组件 */}
    </div>
  );
}

4. 用主题系统统一响应式规则 #

将断点、间距等配置放入Styled Components的主题中，实现全局样式的统一管理：

import { ThemeProvider } from 'styled-components';

const theme = {
  breakpoints: {
    largeDesktop: '1440px',
    mediumDesktop: '1024px',
    smallDesktop: '768px'
  },
  spacing: {
    large: '2em',
    medium: '1.5em',
    small: '1em'
  }
};

const Card = styled.div`
  padding: ${props => props.theme.spacing.large};

  @media (max-width: ${props => props.theme.breakpoints.mediumDesktop}) {
    padding: ${props => props.theme.spacing.medium};
  }
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Card>内容卡片</Card>
    </ThemeProvider>
  );
}

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