面试题：React中如何实现组件的基本响应式布局

Question

在React项目中，要求实现一个简单的卡片组件，当屏幕宽度小于600px时，卡片的字体大小自动缩小为原来的80%，背景颜色变为浅灰色。请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 使用CSS的媒体查询（@media）来检测屏幕宽度是否小于600px。
2. 在React组件中，通过style属性动态应用这些样式。

关键代码片段

import React from 'react';

const Card = () => {
  return (
    <div style={{
      fontSize: '16px',
      backgroundColor: 'white',
      // 媒体查询通过CSS-in-JS模拟
      '@media (max-width: 600px)': {
        fontSize: '16px * 0.8',
        backgroundColor: 'lightgray'
      }
    }}>
      这是一个卡片内容
    </div>
  );
};

export default Card;

在上述代码中，使用了内联样式，并通过在样式对象中添加媒体查询模拟代码来实现当屏幕宽度小于600px时改变字体大小和背景颜色。实际应用中，也可以使用CSS Modules、Styled Components等方式来更好地管理样式。