响应式布局基础 - 完整移动端适配指南

1. 响应式设计概述

1.1 什么是响应式设计

响应式设计(Responsive Web Design, RWD)是一种网页设计方法,使网站能够在不同设备和屏幕尺寸上提供优质的用户体验。

typescript

const responsiveDesignPrinciples = {
  fluidGrids: {
    description: '使用相对单位而非固定像素',
    units: ['%', 'em', 'rem', 'vw', 'vh'],
    example: 'width: 100% instead of width: 960px'
  },
  
  flexibleImages: {
    description: '图片能够自适应容器大小',
    technique: 'max-width: 100%; height: auto;',
    formats: ['WebP', 'AVIF', 'responsive images']
  },
  
  mediaQueries: {
    description: '根据设备特性应用不同样式',
    features: ['width', 'height', 'orientation', 'resolution'],
    breakpoints: ['mobile', 'tablet', 'desktop']
  },
  
  mobileFirst: {
    description: '优先设计移动端,逐步增强',
    approach: 'Start from mobile, progressively enhance for larger screens',
    benefits: ['性能优化', '核心功能优先', '更好的可访问性']
  }
};

1.2 响应式设计的优势

typescript

const advantages = {
  userExperience: [
    '统一的用户体验',
    '无需缩放和横向滚动',
    '内容自适应屏幕',
    '优化的触摸交互'
  ],
  
  development: [
    '单一代码库',
    '降低维护成本',
    '更快的开发速度',
    '统一的URL结构'
  ],
  
  seo: [
    'Google推荐',
    '避免重复内容',
    '更好的移动端排名',
    '统一的反向链接'
  ],
  
  business: [
    '降低开发成本',
    '更广的受众覆盖',
    '提高转化率',
    '未来设备兼容'
  ]
};

2. 视口设置

2.1 Meta Viewport标签

html

<!-- 基础viewport设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 完整属性说明 -->
<meta name="viewport" content="
  width=device-width,
  initial-scale=1.0,
  maximum-scale=5.0,
  minimum-scale=1.0,
  user-scalable=yes
">

<!-- 各属性含义 -->
width=device-width        <!-- 宽度等于设备宽度 -->
initial-scale=1.0         <!-- 初始缩放比例 -->
maximum-scale=5.0         <!-- 最大缩放比例 -->
minimum-scale=1.0         <!-- 最小缩放比例 -->
user-scalable=yes         <!-- 允许用户缩放 -->

2.2 React中的Viewport配置

tsx

// Layout.tsx - Next.js 13+
export const metadata = {
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 5,
    userScalable: true
  }
};

// 或在_app.tsx中
import Head from 'next/head';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

// Vite + React
// index.html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式应用</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3. 断点设计

3.1 常见断点

typescript

// breakpoints.ts
export const breakpoints = {
  // 移动端
  mobile: {
    min: 320,
    max: 767,
    description: '手机'
  },
  
  // 平板
  tablet: {
    min: 768,
    max: 1023,
    description: '平板'
  },
  
  // 桌面
  desktop: {
    min: 1024,
    max: 1439,
    description: '小屏幕桌面'
  },
  
  // 大屏
  wide: {
    min: 1440,
    max: Infinity,
    description: '大屏幕桌面'
  }
};

// Tailwind CSS 断点
export const tailwindBreakpoints = {
  sm: '640px',   // => @media (min-width: 640px)
  md: '768px',   // => @media (min-width: 768px)
  lg: '1024px',  // => @media (min-width: 1024px)
  xl: '1280px',  // => @media (min-width: 1280px)
  '2xl': '1536px' // => @media (min-width: 1536px)
};

// Bootstrap 断点
export const bootstrapBreakpoints = {
  xs: '0px',     // Extra small devices (portrait phones)
  sm: '576px',   // Small devices (landscape phones)
  md: '768px',   // Medium devices (tablets)
  lg: '992px',   // Large devices (desktops)
  xl: '1200px',  // Extra large devices (large desktops)
  xxl: '1400px'  // Extra extra large devices
};

3.2 自定义断点系统

typescript

// useBreakpoint.ts
import { useState, useEffect } from 'react';

type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'wide';

export function useBreakpoint(): Breakpoint {
  const [breakpoint, setBreakpoint] = useState<Breakpoint>('desktop');
  
  useEffect(() => {
    const getBreakpoint = (): Breakpoint => {
      const width = window.innerWidth;
      
      if (width < 768) return 'mobile';
      if (width < 1024) return 'tablet';
      if (width < 1440) return 'desktop';
      return 'wide';
    };
    
    const handleResize = () => {
      setBreakpoint(getBreakpoint());
    };
    
    handleResize();
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return breakpoint;
}

// 使用
function MyComponent() {
  const breakpoint = useBreakpoint();
  
  return (
    <div>
      当前断点: {breakpoint}
      {breakpoint === 'mobile' && <MobileView />}
      {breakpoint === 'desktop' && <DesktopView />}
    </div>
  );
}

// useMediaQuery Hook
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);
  
  useEffect(() => {
    const media = window.matchMedia(query);
    
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    
    return () => media.removeEventListener('change', listener);
  }, [matches, query]);
  
  return matches;
}

// 使用
function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
  const isDesktop = useMediaQuery('(min-width: 1024px)');
  
  return (
    <div>
      {isMobile && <p>移动端视图</p>}
      {isTablet && <p>平板视图</p>}
      {isDesktop && <p>桌面视图</p>}
    </div>
  );
}

4. 流式布局

4.1 相对单位

css

/* 百分比布局 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.column {
  width: 50%; /* 固定百分比 */
  float: left;
}

/* em单位 - 相对于父元素字体大小 */
.text {
  font-size: 16px;
  padding: 1em; /* 16px */
  margin: 0.5em; /* 8px */
}

/* rem单位 - 相对于根元素字体大小 */
:root {
  font-size: 16px;
}

.card {
  padding: 1rem; /* 16px */
  margin-bottom: 2rem; /* 32px */
}

/* vw/vh单位 - 相对于视口 */
.hero {
  width: 100vw;
  height: 100vh;
  font-size: 5vw; /* 响应式字体 */
}

.section {
  min-height: 50vh;
  padding: 5vw;
}

/* vmin/vmax */
.square {
  width: 50vmin; /* 视口宽高中较小值的50% */
  height: 50vmin;
}

/* ch单位 - 字符宽度 */
.text-container {
  max-width: 65ch; /* 最佳阅读宽度 */
}

4.2 React响应式容器

tsx

// Container.tsx
interface ContainerProps {
  children: React.ReactNode;
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  padding?: boolean;
}

export function Container({
  children,
  maxWidth = 'lg',
  padding = true
}: ContainerProps) {
  const maxWidthClasses = {
    sm: 'max-w-screen-sm',   // 640px
    md: 'max-w-screen-md',   // 768px
    lg: 'max-w-screen-lg',   // 1024px
    xl: 'max-w-screen-xl',   // 1280px
    full: 'max-w-full'
  };
  
  return (
    <div
      className={`
        w-full 
        ${maxWidthClasses[maxWidth]} 
        mx-auto 
        ${padding ? 'px-4 sm:px-6 lg:px-8' : ''}
      `}
    >
      {children}
    </div>
  );
}

// 使用CSS-in-JS
import styled from 'styled-components';

const FluidContainer = styled.div`
  width: 100%;
  max-width: ${props => props.maxWidth || '1200px'};
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 3rem);
`;

const FluidGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
`;

5. 响应式图片

5.1 基础响应式图片

html

<!-- 基础响应式 -->
<img 
  src="image.jpg" 
  alt="描述"
  style="max-width: 100%; height: auto;"
>

<!-- srcset - 不同分辨率 -->
<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="响应式图片"
>

<!-- picture元素 - 艺术指导 -->
<picture>
  <source media="(max-width: 767px)" srcset="mobile.jpg">
  <source media="(max-width: 1023px)" srcset="tablet.jpg">
  <source media="(min-width: 1024px)" srcset="desktop.jpg">
  <img src="fallback.jpg" alt="图片">
</picture>

<!-- WebP格式支持 -->
<picture>
  <source type="image/webp" srcset="image.webp">
  <source type="image/jpeg" srcset="image.jpg">
  <img src="image.jpg" alt="图片">
</picture>

5.2 React响应式图片组件

tsx

// ResponsiveImage.tsx
interface ImageSource {
  src: string;
  media?: string;
  type?: string;
}

interface ResponsiveImageProps {
  src: string;
  alt: string;
  sources?: ImageSource[];
  sizes?: string;
  loading?: 'lazy' | 'eager';
  className?: string;
}

export function ResponsiveImage({
  src,
  alt,
  sources = [],
  sizes,
  loading = 'lazy',
  className
}: ResponsiveImageProps) {
  if (sources.length > 0) {
    return (
      <picture>
        {sources.map((source, index) => (
          <source
            key={index}
            srcSet={source.src}
            media={source.media}
            type={source.type}
          />
        ))}
        <img
          src={src}
          alt={alt}
          loading={loading}
          className={className}
        />
      </picture>
    );
  }
  
  return (
    <img
      src={src}
      alt={alt}
      sizes={sizes}
      loading={loading}
      className={className}
      style={{ maxWidth: '100%', height: 'auto' }}
    />
  );
}

// 使用
<ResponsiveImage
  src="/images/hero.jpg"
  alt="英雄图片"
  sources={[
    { src: '/images/hero-mobile.jpg', media: '(max-width: 767px)' },
    { src: '/images/hero-tablet.jpg', media: '(max-width: 1023px)' },
    { src: '/images/hero.webp', type: 'image/webp' }
  ]}
  loading="eager"
/>

// Next.js Image组件
import Image from 'next/image';

export function OptimizedImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="英雄图片"
      width={1200}
      height={600}
      sizes="(max-width: 768px) 100vw, 50vw"
      priority
    />
  );
}

6. 响应式排版

6.1 流式字体

css

/* 固定断点 */
body {
  font-size: 16px;
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

/* clamp() 流式字体 */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* 最小1.5rem, 理想5vw, 最大3rem */
}

p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
  line-height: 1.6;
}

/* calc() 计算 */
.title {
  font-size: calc(1rem + 1vw);
}

/* 响应式行高 */
.text {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: calc(1.5 + 0.2 * (100vw - 20rem) / 60);
}

6.2 模块化比例

typescript

// typography.ts
export const typographyScale = {
  // 移动端 - 1.2比例
  mobile: {
    base: 16,
    scale: 1.2,
    h1: 16 * Math.pow(1.2, 4), // 33.18px
    h2: 16 * Math.pow(1.2, 3), // 27.65px
    h3: 16 * Math.pow(1.2, 2), // 23.04px
    h4: 16 * Math.pow(1.2, 1), // 19.2px
    body: 16,
    small: 16 / 1.2 // 13.33px
  },
  
  // 桌面端 - 1.25比例
  desktop: {
    base: 18,
    scale: 1.25,
    h1: 18 * Math.pow(1.25, 4), // 43.95px
    h2: 18 * Math.pow(1.25, 3), // 35.16px
    h3: 18 * Math.pow(1.25, 2), // 28.13px
    h4: 18 * Math.pow(1.25, 1), // 22.5px
    body: 18,
    small: 18 / 1.25 // 14.4px
  }
};

// React组件
export function Typography({ variant, children }: {
  variant: 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'small';
  children: React.ReactNode;
}) {
  const Tag = variant.startsWith('h') ? variant : 'p';
  
  const styles = {
    fontSize: `clamp(
      ${typographyScale.mobile[variant]}px,
      ${variant === 'h1' ? '5vw' : '2vw'},
      ${typographyScale.desktop[variant]}px
    )`
  };
  
  return <Tag style={styles}>{children}</Tag>;
}

7. 触摸优化

7.1 触摸目标大小

css

/* 最小触摸目标: 44x44px (Apple) / 48x48px (Material) */
.button {
  min-width: 48px;
  min-height: 48px;
  padding: 12px 24px;
  
  /* 扩大触摸区域 */
  position: relative;
}

.button::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}

/* 间距优化 */
.button-group button {
  margin: 8px; /* 至少8px间距 */
}

/* 移动端优化的输入框 */
input,
textarea,
select {
  min-height: 44px;
  font-size: 16px; /* 防止iOS缩放 */
  padding: 12px;
}

7.2 React触摸组件

tsx

// TouchButton.tsx
interface TouchButtonProps {
  onPress: () => void;
  children: React.ReactNode;
  disabled?: boolean;
}

export function TouchButton({
  onPress,
  children,
  disabled = false
}: TouchButtonProps) {
  const [isPressing, setIsPressing] = useState(false);
  
  const handleTouchStart = () => {
    if (!disabled) setIsPressing(true);
  };
  
  const handleTouchEnd = () => {
    if (!disabled) {
      setIsPressing(false);
      onPress();
    }
  };
  
  return (
    <button
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onMouseDown={handleTouchStart}
      onMouseUp={handleTouchEnd}
      disabled={disabled}
      className={`
        min-w-[48px] 
        min-h-[48px] 
        px-6 py-3
        ${isPressing ? 'scale-95' : 'scale-100'}
        transition-transform
        touch-manipulation
      `}
      style={{ WebkitTapHighlightColor: 'transparent' }}
    >
      {children}
    </button>
  );
}

// 阻止双击缩放
export function PreventZoom({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const preventDefault = (e: TouchEvent) => {
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    };
    
    document.addEventListener('touchstart', preventDefault, { passive: false });
    
    return () => {
      document.removeEventListener('touchstart', preventDefault);
    };
  }, []);
  
  return <>{children}</>;
}

8. 性能优化

8.1 条件加载

tsx

// ConditionalRender.tsx
export function ConditionalRender() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  
  // 条件渲染
  return (
    <div>
      {isMobile ? (
        <MobileComponent />
      ) : (
        <DesktopComponent />
      )}
    </div>
  );
}

// 懒加载移动端组件
const MobileNav = lazy(() => import('./MobileNav'));
const DesktopNav = lazy(() => import('./DesktopNav'));

export function Navigation() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {isMobile ? <MobileNav /> : <DesktopNav />}
    </Suspense>
  );
}

// 动态导入
export function DynamicContent() {
  const [Component, setComponent] = useState<React.ComponentType | null>(null);
  const isMobile = useMediaQuery('(max-width: 767px)');
  
  useEffect(() => {
    if (isMobile) {
      import('./MobileContent').then(mod => setComponent(() => mod.default));
    } else {
      import('./DesktopContent').then(mod => setComponent(() => mod.default));
    }
  }, [isMobile]);
  
  return Component ? <Component /> : <div>Loading...</div>;
}

8.2 资源优化

tsx

// 响应式资源加载
export function useResponsiveAssets() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  const isRetina = useMediaQuery('(min-resolution: 2dppx)');
  
  const getImageSrc = (baseName: string) => {
    const device = isMobile ? 'mobile' : 'desktop';
    const resolution = isRetina ? '@2x' : '';
    return `/images/${baseName}-${device}${resolution}.jpg`;
  };
  
  return { getImageSrc };
}

// 预加载关键资源
export function PreloadCriticalAssets() {
  const isMobile = useMediaQuery('(max-width: 767px)');
  
  useEffect(() => {
    const heroImage = isMobile 
      ? '/images/hero-mobile.jpg'
      : '/images/hero-desktop.jpg';
    
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = heroImage;
    document.head.appendChild(link);
    
    return () => {
      document.head.removeChild(link);
    };
  }, [isMobile]);
  
  return null;
}

9. 测试响应式布局

9.1 手动测试

typescript

const testingChecklist = {
  devices: [
    'iPhone SE (375x667)',
    'iPhone 12 Pro (390x844)',
    'iPhone 14 Pro Max (430x932)',
    'iPad Mini (768x1024)',
    'iPad Pro 12.9" (1024x1366)',
    'Desktop 1920x1080',
    'Desktop 2560x1440'
  ],
  
  orientations: [
    'Portrait (竖屏)',
    'Landscape (横屏)'
  ],
  
  browsers: [
    'Chrome',
    'Safari',
    'Firefox',
    'Edge'
  ],
  
  checks: [
    '文本可读性',
    '触摸目标大小',
    '图片加载和显示',
    '布局不破坏',
    '导航可用性',
    '表单可用性'
  ]
};

9.2 自动化测试

typescript

// responsive.test.tsx
import { render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';

describe('Responsive Layout', () => {
  const setViewport = (width: number, height: number) => {
    global.innerWidth = width;
    global.innerHeight = height;
    global.dispatchEvent(new Event('resize'));
  };
  
  it('should render mobile layout on small screens', () => {
    act(() => {
      setViewport(375, 667);
    });
    
    const { getByTestId } = render(<App />);
    expect(getByTestId('mobile-nav')).toBeInTheDocument();
  });
  
  it('should render desktop layout on large screens', () => {
    act(() => {
      setViewport(1920, 1080);
    });
    
    const { getByTestId } = render(<App />);
    expect(getByTestId('desktop-nav')).toBeInTheDocument();
  });
});

// Playwright E2E测试
import { test, expect } from '@playwright/test';

test('responsive navigation', async ({ page }) => {
  // 移动端
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');
  await expect(page.locator('[data-testid="mobile-menu"]')).toBeVisible();
  
  // 桌面端
  await page.setViewportSize({ width: 1920, height: 1080 });
  await expect(page.locator('[data-testid="desktop-menu"]')).toBeVisible();
});

10. 最佳实践

typescript

const responsiveBestPractices = {
  design: [
    '移动优先设计',
    '使用流式布局',
    '相对单位优先',
    '触摸友好的交互',
    '简化移动端内容'
  ],
  
  performance: [
    '条件加载资源',
    '响应式图片',
    '延迟加载非关键内容',
    '优化字体加载',
    '减少移动端JavaScript'
  ],
  
  accessibility: [
    '足够的触摸目标',
    '合适的字体大小',
    '足够的颜色对比度',
    '键盘可访问',
    '屏幕阅读器支持'
  ],
  
  testing: [
    '真实设备测试',
    '多浏览器测试',
    '性能测试',
    '自动化视觉回归',
    '用户测试反馈'
  ],
  
  maintenance: [
    '建立设计系统',
    '组件化开发',
    '文档化断点',
    '版本控制样式',
    '持续优化'
  ]
};

11. 常见问题解决

11.1 横向滚动问题

css

/* 防止横向滚动 */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
}

/* 处理固定宽度元素 */
.fixed-width {
  max-width: 100%;
}

/* 响应式容器 */
.container {
  width: 100%;
  padding-left: max(env(safe-area-inset-left), 1rem);
  padding-right: max(env(safe-area-inset-right), 1rem);
}

11.2 iOS输入框缩放

css

/* 防止iOS输入框放大 */
input,
textarea,
select {
  font-size: 16px !important;
}

/* 或使用viewport设置 */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

11.3 安全区域适配

css

/* iOS刘海屏适配 */
.header {
  padding-top: env(safe-area-inset-top);
}

.footer {
  padding-bottom: env(safe-area-inset-bottom);
}

.sidebar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 组合使用 */
.safe-area {
  padding: 
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

12. 总结

响应式布局的核心要点:

视口设置: 正确配置meta viewport
流式布局: 使用相对单位和百分比
断点设计: 合理设置媒体查询断点
响应式图片: srcset和picture元素
触摸优化: 足够的触摸目标大小
性能优化: 条件加载和资源优化
移动优先: 从移动端开始设计
持续测试: 多设备多浏览器测试

响应式布局基础 - 完整移动端适配指南 ​

1. 响应式设计概述 ​

1.1 什么是响应式设计 ​

1.2 响应式设计的优势 ​

2. 视口设置 ​

2.1 Meta Viewport标签 ​

2.2 React中的Viewport配置 ​

3. 断点设计 ​

3.1 常见断点 ​

3.2 自定义断点系统 ​

4. 流式布局 ​

4.1 相对单位 ​

4.2 React响应式容器 ​

5. 响应式图片 ​

5.1 基础响应式图片 ​

5.2 React响应式图片组件 ​

6. 响应式排版 ​

6.1 流式字体 ​

6.2 模块化比例 ​

7. 触摸优化 ​

7.1 触摸目标大小 ​

7.2 React触摸组件 ​

8. 性能优化 ​

8.1 条件加载 ​

8.2 资源优化 ​

9. 测试响应式布局 ​

9.1 手动测试 ​

9.2 自动化测试 ​

10. 最佳实践 ​

11. 常见问题解决 ​

11.1 横向滚动问题 ​

11.2 iOS输入框缩放 ​

11.3 安全区域适配 ​

12. 总结 ​

响应式布局基础 - 完整移动端适配指南

1. 响应式设计概述

1.1 什么是响应式设计

1.2 响应式设计的优势

2. 视口设置

2.1 Meta Viewport标签

2.2 React中的Viewport配置

3. 断点设计

3.1 常见断点

3.2 自定义断点系统

4. 流式布局

4.1 相对单位

4.2 React响应式容器

5. 响应式图片

5.1 基础响应式图片

5.2 React响应式图片组件

6. 响应式排版

6.1 流式字体

6.2 模块化比例

7. 触摸优化

7.1 触摸目标大小

7.2 React触摸组件

8. 性能优化

8.1 条件加载

8.2 资源优化

9. 测试响应式布局

9.1 手动测试

9.2 自动化测试

10. 最佳实践

11. 常见问题解决

11.1 横向滚动问题

11.2 iOS输入框缩放

11.3 安全区域适配

12. 总结