面试题：Next.js中如何利用媒体查询实现基本的响应式布局

Question

在Next.js项目中，阐述如何通过媒体查询来实现当屏幕宽度小于768px时，某个组件的样式从水平排列变为垂直排列，并写出关键代码示例。

Answer 1

实现思路

在Next.js项目中，可以使用CSS的媒体查询（@media）来检测屏幕宽度，并根据条件应用不同的样式。对于组件样式从水平排列变为垂直排列，可以通过修改flex-direction属性来实现。一般来说，水平排列使用flex-direction: row，垂直排列使用flex-direction: column。

关键代码示例

1. 使用CSS Modules： 假设组件名为MyComponent，首先在MyComponent.module.css文件中编写样式：

/* MyComponent.module.css */
.container {
  display: flex;
  flex-direction: row; /* 默认水平排列 */
}

@media (max-width: 768px) {
 .container {
    flex-direction: column; /* 屏幕宽度小于768px时垂直排列 */
  }
}

然后在MyComponent.js中引入样式并应用：

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <div className={styles.container}>
    {/* 组件内容 */}
  </div>;
};

export default MyComponent;

2. 使用Styled Components： 先安装styled-components：npm install styled-components 在组件文件（例如MyComponent.js）中编写如下代码：

import React from 'react';
import styled from'styled-components';

const Container = styled.div`
  display: flex;
  flex-direction: row;

  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

const MyComponent = () => {
  return <Container>
    {/* 组件内容 */}
  </Container>;
};

export default MyComponent;