styled-components媒体查询实战指南

1. 为什么需要媒体查询？

在React项目中使用styled-components时，媒体查询（Media Queries）是实现响应式设计的关键技术。现代Web应用需要在不同设备上提供良好的用户体验，从桌面大屏到移动小屏，样式需要动态适配。

媒体查询允许我们根据设备特性（如屏幕宽度、高度、方向等）有条件地应用CSS规则。这在styled-components中尤为重要，因为组件样式是内联的，传统的全局CSS媒体查询方式不再适用。

2. styled-components中的媒体查询基础

2.1 基本语法结构

在styled-components中，媒体查询可以直接写在模板字符串中，语法与常规CSS几乎一致：

javascript复制const Button = styled.button`
  background: palevioletred;
  
  @media (max-width: 768px) {
    background: mediumvioletred;
    padding: 8px 12px;
  }
`;

这种写法将媒体查询直接嵌入组件样式定义中，当屏幕宽度小于768px时，按钮样式会自动切换。

2.2 媒体查询的断点设置

合理的断点设置是响应式设计的基础。常见的断点参考：

javascript复制const size = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  tablet: '768px',
  laptop: '1024px',
  laptopL: '1440px',
  desktop: '2560px'
};

const device = {
  mobileS: `(min-width: ${size.mobileS})`,
  mobileM: `(min-width: ${size.mobileM})`,
  mobileL: `(min-width: ${size.mobileL})`,
  tablet: `(min-width: ${size.tablet})`,
  laptop: `(min-width: ${size.laptop})`,
  lapt