react 如何做响应式布局官网
使用 CSS Flexbox 或 Grid 布局
Flexbox 和 Grid 是 CSS 提供的现代布局方案，能够轻松实现响应式设计。Flexbox 适合一维布局（行或列），Grid 适合二维布局（行列组合）。通过媒体查询调整布局结构，适应不同屏幕尺寸。
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 200px;
}
@media (max-width: 768px) {
.item {
flex: 1 1 100%;
}
}使用 CSS 媒体查询
媒体查询是响应式设计的核心工具，允许根据屏幕宽度、设备类型等条件应用不同的样式。在 React 中可以直接在 CSS 文件中使用媒体查询，也可以通过 JavaScript 动态调整。
/* 默认样式 */
.header {
font-size: 24px;
}
/* 小屏幕调整 */
@media (max-width: 600px) {
.header {
font-size: 18px;
}
}使用 React 响应式钩子或 HOC
通过自定义钩子或高阶组件（HOC）动态监听窗口尺寸变化，实现条件渲染。例如使用 window.innerWidth 和 resize 事件，结合 useState 和 useEffect 钩子。
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
function ResponsiveComponent() {
const { width } = useWindowSize();
return width < 768 ? <MobileView /> : <DesktopView />;
}使用现成的响应式库
第三方库如 react-responsive 或 react-slick 可以快速实现响应式布局或轮播组件。这些库封装了常见的响应式逻辑，减少重复代码。
import { useMediaQuery } from 'react-responsive';
function Example() {
const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
return isMobile ? <MobileMenu /> : <DesktopMenu />;
}图片和资源的响应式处理
使用 srcSet 和 picture 标签为不同屏幕尺寸提供优化后的图片资源。结合 CSS 的 object-fit 属性确保图片比例正确。
<img
srcSet="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1200px"
src="large.jpg"
alt="Responsive Image"
/>响应式字体和间距
使用相对单位（如 vw、rem）替代固定像素值，使字体和间距随屏幕尺寸动态调整。CSS 的 clamp() 函数可以设置最小、理想和最大值。
.title {
font-size: clamp(16px, 4vw, 24px);
margin: 1rem 2vw;
}服务端渲染（SSR）适配
在 Next.js 等框架中，结合服务端渲染时通过 device-detector 库识别设备类型，提前加载适合的布局组件，提升首屏性能。
import { isMobile } from 'react-device-detect';
function HomePage({ userAgent }) {
return isMobile ? <MobileLayout /> : <DesktopLayout />;
}
