前端多端适配与Electron思路

前端多端适配与Electron场景

1. rem 基准值确定与媒体查询断点设计

基准值计算逻辑

我采用 "基于设计稿宽度动态计算" 的思路确定 rem 基准值，核心逻辑如下：

1. viewport 设置 ：首先在 HTML 头部设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，确保页面不允许用户缩放，且设备宽度与视口宽度一致，避免默认缩放导致的适配偏差。

2. 设计稿适配基准：假设设计稿宽度为 750px（主流移动端设计稿尺寸），定义 1rem = 100px（简化计算，避免小数运算），则设计稿中 100px 的元素对应代码中 1rem。

3. 动态计算脚本 ：在页面加载和窗口 resize 时，通过 JS 计算当前视口宽度与设计稿宽度的比例，动态设置html标签的font-size：

function setRemBase() {

  const designWidth = 750; // 设计稿宽度

  const baseFontSize = 100; // 设计稿中1rem对应的px值

  const currentWidth = document.documentElement.clientWidth;

  // 限制最小宽度（320px）和最大宽度（768px，iPad竖屏临界值），避免极端尺寸下布局错乱

  const targetWidth = Math.min(Math.max(currentWidth, 320), 768);

  const remBase = (targetWidth / designWidth) * baseFontSize;

  document.documentElement.style.fontSize = `${remBase}px`;

}

window.addEventListener('load', setRemBase);

window.addEventListener('resize', setRemBase);

1. 设备像素比（DPR）处理：对于 Retina 屏等高清设备，仅通过 rem 无法解决图片模糊问题，需结合 DPR 动态加载 2x/3x 图，但 rem 基准值计算无需直接关联 DPR（DPR 影响的是像素精度，而非布局比例）。

媒体查询断点设计思路

选择 320px（早期 iPhone 最小宽度）、375px（iPhone SE/8 等主流移动端宽度）、768px（iPad 竖屏宽度）作为核心断点，原因如下：

1. 覆盖主流设备尺寸：320px 覆盖低端小屏手机，375px 覆盖中端主流手机，768px 区分移动端与 iPad（平板竖屏临界值），再补充 1024px（iPad 横屏）断点，可覆盖 95% 以上移动 / 平板设备。

2. 避免过度碎片化：断点过多会导致 CSS 代码冗余，且相邻断点差异小（如 360px 与 375px），适配意义不大；选择设备主流宽度作为断点，可平衡适配精度与代码可维护性。

3. 业务场景匹配：若项目目标用户以年轻群体为主（多使用 375px + 手机），可弱化 320px 断点；若需兼容老年机（小屏），则必须保留 320px 断点。

2. px 与 rem 混合使用的冲突解决方案

核心问题

固定 px 元素（如 1px 边框、16px 图标）在 rem 适配中，会因屏幕尺寸变化导致 "相对比例失调"（如小屏手机中 1px 边框过粗，大屏手机中 16px 图标过小）。

具体解决方案：CSS 变量 + 动态脚本结合

1. 定义 CSS 变量关联 rem 基准 ：在html标签中通过 JS 动态设置 CSS 变量，关联 rem 基准值，再用变量定义 px 元素：

/* CSS */

:root {

  --rem-base: 100px; /* 初始值，JS会动态覆盖 */

  --border-width: calc(1px / var(--rem-base) * 1rem); /* 将1px转为rem单位 */

  --icon-size: calc(16px / var(--rem-base) * 1rem); /* 将16px转为rem单位 */

}

.btn {

  border: var(--border-width) solid #000;

  font-size: var(--icon-size);

}

// JS：更新rem基准时同步更新CSS变量

function setRemBase() {

  // （同题1逻辑）计算remBase

  const remBase = ...;

  document.documentElement.style.fontSize = `${remBase}px`;

  document.documentElement.style.setProperty('--rem-base', `${remBase}px`);

}

1. 特殊场景：1px 物理像素适配：对于高清屏（DPR>1），CSS 中的 1px 实际对应 2px/3px 物理像素，需结合 DPR 优化：

:root {

  --dpr: 1; /* JS动态设置DPR */

  --real-border-width: calc(1px / var(--dpr)); /* 物理像素1px */

}

.btn {

  border-width: var(--real-border-width);

  /* 配合transform缩放实现高清屏1px边框 */

  border-image: linear-gradient(to right, #000, #000) 1 stretch;

}

// JS获取DPR

const dpr = window.devicePixelRatio || 1;

document.documentElement.style.setProperty('--dpr', dpr);

方案优缺点

• 优点：完全兼容 rem 适配逻辑，px 元素随屏幕尺寸动态缩放，且 CSS 变量可复用，代码可维护性高。

• 缺点：依赖 CSS 变量（IE 不兼容，但若项目无 IE 需求可忽略）；需额外编写 JS 逻辑同步变量，增加少量开发成本。

3. Electron 打包后网络场景实现方案

主进程与渲染进程通信方式

采用 "封装请求中间层" 的方案，核心架构如下：

1. 渲染进程侧 ：封装request.js工具库，统一处理请求参数、loading 状态，通过ipcRenderer向主进程发送请求：

// 渲染进程：request.js

import { ipcRenderer } from 'electron';

export function fetchApi(url, params) {

  return new Promise((resolve, reject) => {

    ipcRenderer.send('api-request', { url, params });

    ipcRenderer.once(`api-response-${url}`, (_, { success, data, error }) => {

      if (success) resolve(data);

      else reject(error);

    });

  });

}

1. 主进程侧 ：在main.js中监听api-request事件，使用axios（或node-fetch）发起网络请求，避免渲染进程跨域问题：

// 主进程：main.js

import { ipcMain } from 'electron';

import axios from 'axios';

ipcMain.on('api-request', async (event, { url, params }) => {

  try {

    const response = await axios({

      url: `https://api.xxx.com${url}`,

      method: 'POST',

      data: params,

      timeout: 10000,

    });

    event.reply(`api-response-${url}`, { success: true, data: response.data });

  } catch (error) {

    event.reply(`api-response-${url}`, { 

      success: false, 

      error: error.message || '网络请求失败' 

    });

  }

});

Electron 跨域问题处理

• 浏览器端跨域：依赖后端 CORS 配置或前端代理（如 webpack-dev-server proxy），渲染进程直接请求会触发跨域拦截。

• Electron 解决方案：主进程属于 Node 环境，不受浏览器跨域策略限制，因此通过主进程转发请求，从根源解决跨域问题；无需额外配置 CORS，仅需保证主进程请求参数正确。

网络异常处理逻辑

1. 断网检测 ：在主进程中监听online/offline事件，同步通知所有渲染进程：

// 主进程

const { BrowserWindow } = require('electron');

window.addEventListener('offline', () => {

  BrowserWindow.getAllWindows().forEach(window => {

    window.webContents.send('network-status', 'offline');

  });

});

window.addEventListener('online', () => {

  // 同上，发送'online'状态

});

1. 断网用户提示 ：渲染进程监听network-status事件，显示全局断网弹窗（如底部固定提示栏），禁用需网络的操作按钮。

2. 重连后请求重试 ：在request.js中记录失败的请求队列，网络恢复后自动重试（限制重试次数 3 次，避免死循环）：

// 渲染进程：request.js

let failedRequests = [];

ipcRenderer.on('network-status', (_, status) => {

  if (status === 'online' && failedRequests.length > 0) {

    failedRequests.forEach(req => fetchApi(req.url, req.params));

    failedRequests = [];

  }

});

export function fetchApi(url, params) {

  return new Promise((resolve, reject) => {

    // （原逻辑）请求失败时加入队列

    ipcRenderer.once(`api-response-${url}`, (_, result) => {

      if (!result.success && result.error.includes('Network Error')) {

        failedRequests.push({ url, params });

      }

    });

  });

}

4. Electron 多窗口通信机制与资源竞争解决

通信方式选型对比

通信方式	原理	优点	缺点	项目选型依据
ipc 通信	主进程转发，ipcMain/ipcRenderer	跨窗口 / 进程可靠，支持异步	需主进程中转，代码稍复杂	核心选型：用于窗口间关键数据通信（如用户登录状态同步）
localStorage	渲染进程共享本地存储	无需主进程，代码简单	仅支持字符串，容量有限（5MB）	辅助选型：用于轻量配置同步（如主题设置）
自定义事件	渲染进程间直接触发	无主进程依赖，速度快	仅同域窗口可用，安全性低	弃用：Electron 窗口可能跨域（如加载远程页面）
共享内存	Node shared-memory模块	高并发数据共享，性能好	需处理内存锁，复杂度高	弃用：项目无高频数据共享场景（如实时日志）

资源竞争问题解决方案：分布式锁 + 状态管理

以 "多窗口同时修改用户昵称"（本地存储userInfo）为例，解决方案如下：

1. 实现分布式锁 ：通过localStorage存储锁状态，修改前先获取锁，修改后释放锁：

// 窗口A/B共用的工具函数

export function withLock(key, callback) {

  const lockKey = `lock:${key}`;

  // 检查锁是否存在（过期时间1000ms，避免死锁）

  const lockValue = localStorage.getItem(lockKey);

  if (lockValue && Date.now() - Number(lockValue) < 1000) {

    // 锁未释放，100ms后重试

    return setTimeout(() => withLock(key, callback), 100);

  }

  // 获取锁

  localStorage.setItem(lockKey, Date.now());

  try {

    // 执行修改逻辑

    callback();

  } finally {

    // 释放锁

    localStorage.removeItem(lockKey);

  }

}

1. 调用示例：

// 窗口A修改昵称

withLock('userInfo', () => {

  const userInfo = JSON.parse(localStorage.getItem('userInfo'));

  userInfo.nickname = '新昵称A';

  localStorage.setItem('userInfo', JSON.stringify(userInfo));

  // 通知其他窗口更新

  ipcRenderer.send('userInfo-updated', userInfo);

});

1. 状态同步：通过 ipc 通信通知所有窗口更新数据，避免仅本地修改导致的不一致：

// 所有窗口监听更新事件

ipcRenderer.on('userInfo-updated', (_, userInfo) => {

  localStorage.setItem('userInfo', JSON.stringify(userInfo));

  // 重新渲染页面

  renderUserInfo(userInfo);

});

5. Electron 多系统窗口一致性适配

核心差异点

Windows 与 macOS 在窗口样式（如标题栏高度、边框圆角）、行为（如最大化时是否保留边框）上差异显著，Linux（如 Ubuntu）差异较小。

具体适配方案

1. 窗口样式一致性：

• 隐藏默认标题栏 ：使用frame: false隐藏系统默认标题栏，自定义 HTML 标题栏（如div.header），确保多系统样式统一：

// 主进程：创建窗口

const mainWindow = new BrowserWindow({

  width: 800,

  height: 600,

  frame: false, // 隐藏默认标题栏

  titleBarStyle: 'hiddenInset', // macOS兼容：隐藏标题栏但保留窗口控制按钮

  trafficLightPosition: { x: 15, y: 15 }, // macOS：调整窗口控制按钮位置

});

• 统一边框与圆角：通过 CSS 设置窗口内容区边框和圆角，避免系统默认样式差异：

body {

  margin: 0;

  border: 1px solid #e5e7eb; /* 统一边框 */

  border-radius: 8px; /* 统一圆角（Windows需配合窗口无框设置） */

  overflow: hidden;

}

.header {

  height: 40px; /* 统一标题栏高度 */

  background: #fff;

  border-bottom: 1px solid #e5e7eb;

}

1. 窗口行为一致性：

• 最大化 / 最小化逻辑 ：自定义最大化按钮事件，通过win.isMaximized()判断状态，避免 macOS 最大化时全屏（默认行为）：

// 渲染进程：最大化按钮点击事件

document.querySelector('.btn-max').addEventListener('click', () => {

  ipcRenderer.send('window-maximize');

});

// 主进程：处理最大化逻辑

ipcMain.on('window-maximize', (event) => {

  const win = BrowserWindow.fromWebContents(event.sender);

  if (win.isMaximized()) {

    win.unmaximize();

  } else {

    // macOS：禁止全屏，仅最大化窗口

    if (process.platform === 'darwin') {

      win.setFullScreen(false);

    }

    win.maximize();

  }

});

• 窗口拖动区域 ：在自定义标题栏中添加-webkit-app-region: drag，确保多系统均可拖动窗口：

.header {

  -webkit-app-region: drag; /* 允许拖动 */

}

.header .btn {

  -webkit-app-region: no-drag; /* 按钮禁止拖动 */

}

1. 兼容性处理工具 ：使用electron-platform库判断系统类型，针对性处理特殊逻辑：

import { isMac, isWindows } from 'electron-platform';

if (isWindows) {

  // Windows：窗口最大化时移除边框圆角（避免圆角与屏幕边缘冲突）

  win.on('maximize', () => {

    win.webContents.send('window-maximized', true);

  });

}

6. Electron 窗口缩放 / 分辨率切换的 rem 动态更新

核心问题

Electron 窗口缩放（如用户拖拽窗口边缘）或屏幕分辨率切换（如笔记本外接显示器）时，视口宽度变化，若 rem 基准值不更新，会导致布局错乱。

解决方案：防抖监听 + 基准值重计算

1. 事件监听逻辑：

• 窗口缩放监听 ：在渲染进程中监听resize事件，响应窗口宽度变化。

• 分辨率切换监听 ：在主进程中监听screen:display-metrics-changed事件，通知渲染进程更新：

// 主进程

const { screen } = require('electron');

screen.on('display-metrics-changed', (_, display) => {

  BrowserWindow.getAllWindows().forEach(window => {

    window.webContents.send('display-changed', display.size);

  });

});

1. rem 基准值重计算流程：

// 渲染进程：防抖函数（避免频繁触发）

function debounce(fn, delay = 200) {

  let timer = null;

  return (...args) => {

    clearTimeout(timer);

    timer = setTimeout(() => fn.apply(this, args), delay);

  };

}

// 重计算rem基准

6. Electron 窗口缩放 / 分辨率切换的 rem 动态更新（续）

复用题 1 中的setRemBase函数，结合防抖处理：

// 渲染进程：重计算rem基准
const debouncedSetRem = debounce(setRemBase, 200);
// 监听窗口缩放
window.addEventListener('resize', debouncedSetRem);
// 监听分辨率切换（主进程通知）
ipcRenderer.on('display-changed', debouncedSetRem);

3. 性能优化：防抖与边界限制

• 防抖处理：设置 200ms 延迟，避免用户快速拖拽窗口边缘时，setRemBase频繁触发（每秒最多触发 5 次），减少重排重绘消耗。

• 边界限制：同题 1 中 "限制最小宽度 320px、最大宽度 768px" 的逻辑，避免窗口缩放到极端尺寸（如宽度 < 300px）时，rem 基准值过小导致布局完全错乱。

• Electron 特殊处理：若窗口设置了固定最小尺寸（如minWidth: 320），需确保 JS 中的宽度限制与窗口配置一致，避免逻辑冲突。

7. 媒体查询 + rem 适配方案与其他方案的对比

与主流适配方案的对比分析

适配方案	核心原理	优势	不足	项目选型依据
媒体查询 + rem	动态计算 html 字体大小 + 断点样式调整	兼容性好（支持 IE9+）、布局比例灵活	依赖 JS 计算、小数 rem 可能导致渲染偏差	核心选型：项目需兼容中低端设备，且布局以 "比例适配" 为主
vw/vh	视口宽度 / 高度的 1% 为单位	无需 JS、天然适配所有尺寸	兼容性较差（IE11 部分支持）、难以精确控制断点	弃用：项目需兼容 IE10，且 vw 在小屏手机中易导致字体过小
Flexbox/Grid 布局	弹性盒 / 网格布局，依赖容器适配	适合复杂布局、无需依赖尺寸单位	仅解决布局结构适配，无法处理字体 / 间距比例	辅助使用：与 rem 结合，用于页面内部组件布局（如列表、卡片）
lib-flexible（第三方库）	类似 rem 方案，自动处理 DPR	开箱即用、减少重复开发	库体积约 4KB、无法自定义基准逻辑	弃用：项目需高度定制 rem 计算规则（如限制最大宽度），库的灵活性不足
CSS Modules + 自适应组件	组件内封装多尺寸样式，通过 JS 切换	组件化清晰、样式隔离	代码冗余（每个组件需写多套样式）	弃用：项目页面较多，组件化适配会导致开发效率低下

方案局限性规避

1. 小数 rem 渲染问题：当计算出的 rem 基准值为小数（如1rem=41.333px）时，浏览器渲染可能出现像素偏差（如元素宽度计算为3.5rem=144.665px，实际渲染为 145px）。

解决方案：在setRemBase中对 rem 基准值取两位小数，减少精度误差：

const remBase = Math.round(((targetWidth / designWidth) * baseFontSize) * 100) / 100;

2. JS 加载失败导致适配失效：若用户禁用 JS，rem 基准值无法计算，页面会以默认1rem=16px渲染，导致布局错乱。

解决方案：在中添加 noscript 降级样式，使用固定 px 单位适配主流尺寸：

<noscript>
  <style>
    /* 无JS时，适配375px屏幕 */
    body { font-size: 16px; }
    .container { width: 375px; margin: 0 auto; }
  </style>
</noscript>

8. Electron 打包后远程资源加载容错机制

核心问题

Electron 打包后，若页面依赖 CDN 资源（如cdn.xxx.com/react.min.j...）或接口图片，可能因网络差、CDN 故障导致资源加载失败，影响功能使用。

具体容错方案

1. 本地资源备份机制：

• CDN 资源本地化：将核心 JS/CSS（如 React、Vue）下载到项目static目录，打包时随应用分发，优先加载本地资源，失败再尝试 CDN：

<!-- 优先加载本地React -->
<script src="./static/react.min.js"></script>
<!-- 本地加载失败时，尝试CDN -->
<script>
  if (typeof React === 'undefined') {
    const script = document.createElement('script');
    script.src = 'https://cdn.xxx.com/react.min.js';
    document.head.appendChild(script);
  }
</script>

• 图片资源缓存：通过 Electron 的session模块缓存接口图片到本地，下次加载时优先读取缓存：

// 主进程：设置图片缓存策略
const { session } = require('electron');
session.defaultSession.webRequest.onBeforeRequest((details, callback) => {
  if (details.url.endsWith('.png') || details.url.endsWith('.jpg')) {
    // 缓存有效期7天
    callback({ requestHeaders: { 'Cache-Control': 'max-age=604800' } });
  } else {
    callback({});
  }
});

2. 加载失败提示与重试：

• JS/CSS 加载失败：监听error事件，显示错误提示并提供重试按钮：

// 渲染进程：监听CDN脚本加载失败
const cdnScript = document.createElement('script');
cdnScript.src = 'https://cdn.xxx.com/vue.min.js';
cdnScript.onerror = () => {
  const retryBtn = document.createElement('button');
  retryBtn.textContent = '资源加载失败，点击重试';
  retryBtn.onclick = () => window.location.reload();
  document.body.appendChild(retryBtn);
};
document.head.appendChild(cdnScript);

• 图片加载失败：使用onerror事件显示默认占位图：

<img 
  src="https://api.xxx.com/user-avatar.png" 
  onerror="this.src='./static/default-avatar.png'"
>

3. Electron 主进程辅助优化：

• 资源下载进度提示：通过主进程downloadURL下载大体积资源（如 Excel 导出文件），并显示进度条：

// 主进程：下载资源并显示进度
ipcMain.on('download-resource', (event, url) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  win.webContents.downloadURL(url);
  win.webContents.session.on('will-download', (_, item) => {
    item.on('updated', (_, state) => {
      if (state === 'progressing') {
        // 发送下载进度到渲染进程
        event.reply('download-progress', item.getReceivedBytes() / item.getTotalBytes());
      }
    });
  });
});

9. 多端适配测试方案与问题定位

测试工具选型

测试场景	工具 / 方案	优势	使用场景
移动端 /iPad 适配测试	Chrome 开发者工具（Device Toolbar）	支持模拟 200 + 设备尺寸、网络节流	快速验证布局适配，无需真机
Electron 窗口测试	Electron Debugger（--inspect）	调试主进程 / 渲染进程、查看控制台日志	定位 Electron API 调用错误
真机测试	手机 /iPad 连接 Chrome DevTools	真实设备环境，避免模拟偏差	验证触摸交互、高清屏适配
多系统测试	虚拟机（VMware）+ 实体机	覆盖 Windows/macOS/Linux	验证窗口样式、系统 API 兼容性

测试用例设计（核心场景）

1. 布局适配测试：

• 移动端：320px（iPhone 5）、375px（iPhone 8）、414px（iPhone 11）屏幕下，页面是否无横向滚动、元素无重叠。

• iPad：768px（竖屏）、1024px（横屏）下，是否触发平板专属样式（如双列布局）。

• Electron：窗口宽度从 320px 拖拽到 1200px，rem 基准值是否动态更新，布局是否平滑过渡。

2. 功能测试：

• 网络场景：断网时是否显示提示、重连后请求是否重试；弱网（2G）下资源加载是否有进度提示。

• 多窗口场景：打开 2 个以上窗口，修改本地存储数据（如用户昵称），是否所有窗口同步更新。

3. 性能测试：

• 窗口缩放时，通过 Chrome DevTools 的 Performance 面板，查看重排重绘频率（低于 60fps 需优化）。

• Electron 打包后，通过electron-builder的--analyze选项，分析包体积（核心依赖是否过大）。

问题定位方法

1. rem 计算错误：

• 在setRemBase中添加日志，打印当前视口宽度、计算后的 rem 基准值：

console.log(`当前宽度：${currentWidth}px，rem基准：${remBase}px`);

• 通过 Chrome DevTools 的 Elements 面板，查看html标签的font-size是否符合预期。

2. Electron 窗口通信问题：

• 使用electron-log库记录主进程 / 渲染进程日志，定位通信断点：

// 主进程：记录ipc通信日志
import log from 'electron-log';
ipcMain.on('api-request', (event, data) => {
  log.info('收到请求：', data);
});

• 通过 Electron Debugger（npm run electron:debug），在主进程中打断点，调试通信逻辑。

3. 跨系统兼容性问题：

• 使用process.platform打印当前系统，针对性输出日志：

console.log(`当前系统：${process.platform}`); // darwin（macOS）、win32（Windows）

• 在虚拟机中复现问题，通过对比不同系统的日志差异，定位兼容性代码。

10. 新增终端（智能电视、折叠屏）的适配扩展方案

智能电视适配

1. 断点设计逻辑：

• 核心断点：3840px（4K 电视）、1920px（1080P 电视）、1280px（720P 电视），覆盖主流电视分辨率。

• 特殊处理：电视屏幕尺寸大（通常 55 英寸 +），需增大元素间距和字体（如基础字体 24px），避免用户远距离观看模糊。

2. rem 基准值调整：

• 修改setRemBase，增加电视端宽度判断，调整基准值计算逻辑：

function setRemBase() {
  const designWidth = 3840; // 4K电视设计稿宽度
  const baseFontSize = 100;
  const currentWidth = document.documentElement.clientWidth;
  // 判断是否为电视端（宽度>1280px）
  const isTv = currentWidth > 1280;
  let targetWidth;
  if (isTv) {
    // 电视端：不限制最大宽度，按实际分辨率计算
    targetWidth = currentWidth;
  } else {
    // 移动端/平板：原逻辑
    targetWidth = Math.min(Math.max(currentWidth, 320), 768);
  }
  const remBase = (targetWidth / designWidth) * baseFontSize;
  document.documentElement.style.fontSize = `${remBase}px`;
}

3. Electron 窗口配置：

• 电视端默认全屏运行，禁用窗口拖动和缩放：

// 主进程：创建电视端窗口
const tvWindow = new BrowserWindow({
  fullscreen: true, // 默认全屏
  fullscreenable: true,
  resizable: false, // 禁用缩放
  frame: false, // 隐藏标题栏
});

折叠屏手机适配

1. 断点设计逻辑：

• 核心断点：折叠态 375px（如三星 Galaxy Z Fold5 折叠后宽度）、展开态 720px（展开后宽度），需区分两种状态的布局。

• 特殊处理：折叠屏展开后为 "小平板" 形态，需切换为双列布局（如左侧列表、右侧详情），折叠后为单列布局。

2. rem 基准值调整：

• 监听折叠屏状态变化（通过screen API 获取屏幕尺寸变化），动态切换设计稿基准：

// 渲染进程：监听折叠状态
window.addEventListener('resize', () => {
  const currentWidth = document.documentElement.clientWidth;
  const isUnfolded = currentWidth > 500; // 展开态判断阈值
  // 切换设计稿宽度（折叠态750px，展开态1440px）
  designWidth = isUnfolded ? 1440 : 750;
  setRemBase();
  // 切换布局（双列/单列）
  document.body.classList.toggle('unfolded', isUnfolded);
});

• CSS 配合切换布局：

/* 折叠态：单列布局 */
.container { display: flex; flex-direction: column; }
/* 展开态：双列布局 */
.container.unfolded { flex-direction: row; }
.container.unfolded .list { width: 30%; }
.container.unfolded .detail { width: 70%; }

3. 代码可维护性保障：

• 模块化适配配置：将各终端的断点、设计稿宽度、基准值配置抽离为单独文件（adaptation.config.js），便于统一修改：

// adaptation.config.js
export default {
  mobile: { minWidth: 320, maxWidth: 767, designWidth: 750 },
  ipad: { minWidth: 768, maxWidth: 1024, designWidth: 1536 },
  tv: { minWidth: 1280, maxWidth: Infinity, designWidth: 3840 },
  foldable: { foldedWidth: 375, unfoldedWidth: 720, designWidth: 1440 }
};

• 统一工具函数：封装getTerminalType（判断终端类型）、updateRemBase（更新 rem 基准）等工具函数，避免重复代码：

// adaptation.utils.js
import config from './adaptation.config.js';
export function getTerminalType(width) {
  if (width >= config.tv.minWidth) return 'tv';
  if (width >= config.ipad.minWidth) return 'ipad';
  if (width > config.foldable.foldedWidth) return 'foldable-unfolded';
  return 'mobile';
}

### 10. 新增终端（智能电视、折叠屏）的适配扩展方案（续）

智能电视适配（续）

4. 交互优化适配：

• 电视端主要通过遥控器操作，需处理按键导航逻辑。通过监听keydown事件，实现元素间的焦点切换：

// 渲染进程：电视端按键导航
let focusIndex = 0; // 当前聚焦元素索引
const focusableElements = document.querySelectorAll('.btn, .input'); // 可聚焦元素
window.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowRight':
      focusIndex = (focusIndex + 1) % focusableElements.length;
      break;
    case 'ArrowLeft':
      focusIndex = (focusIndex - 1 + focusableElements.length) % focusableElements.length;
      break;
    case 'Enter':
      focusableElements[focusIndex].click(); // 回车触发点击
      break;
  }
  // 高亮当前聚焦元素
  focusableElements.forEach((el, index) => {
    el.classList.toggle('focused', index === focusIndex);
  });
});

• 为聚焦元素添加明显样式，方便用户识别：

.focused {
  outline: 2px solid #0099ff;
  transform: scale(1.05);
  transition: all 0.2s;
}

5. 性能保障方案：

• 电视端硬件性能差异较大，需优化渲染性能。减少 DOM 节点数量，避免复杂动画（如 3D 变换），优先使用 CSS 过渡动画：

/* 避免使用消耗性能的动画 */
.bad-animation {
  animation: rotate 2s linear infinite; /* 3D旋转消耗大 */
}
.good-animation {
  transition: transform 0.3s ease; /* 过渡动画更轻量 */
}

• 对列表类组件（如影视列表）实现懒加载，避免一次性渲染过多元素：

// 电视端列表懒加载
const listContainer = document.querySelector('.video-list');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target.querySelector('img');
      img.src = img.dataset.src; // 加载真实图片
      observer.unobserve(entry.target);
    }
  });
});
// 监听列表项
document.querySelectorAll('.video-item').forEach(item => {
  observer.observe(item);
});

折叠屏手机适配（续）

4. 折叠状态切换的平滑过渡：

• 折叠与展开状态切换时，避免布局突变。通过 CSS 过渡实现平滑布局变化：

.container {
  display: flex;
  flex-direction: column;
  transition: flex-direction 0.3s ease, width 0.3s ease; /* 过渡动画 */
}
.container.unfolded {
  flex-direction: row;
}
.list, .detail {
  transition: width 0.3s ease;
}

• 若切换时涉及数据加载（如展开态加载详情数据），需添加加载状态，提升用户体验：

// 折叠态切换展开态时加载详情
window.addEventListener('resize', () => {
  const currentWidth = document.documentElement.clientWidth;
  const isUnfolded = currentWidth > 500;
  if (isUnfolded && !document.querySelector('.detail').hasData) {
    // 显示加载中
    document.querySelector('.detail').innerHTML = '<div class="loading">加载中...</div>';
    // 加载详情数据
    fetchDetailData().then(data => {
      renderDetail(data);
      document.querySelector('.detail').hasData = true;
    });
  }
});

5. 特殊场景处理：

• 折叠屏分屏模式（如一边显示应用，一边显示聊天）下，需确保应用适配分屏尺寸。通过监听resize事件，判断是否处于分屏状态：

// 检测分屏状态
function checkSplitScreen() {
  const screenWidth = window.screen.width;
  const appWidth = document.documentElement.clientWidth;
  // 分屏判断：应用宽度小于屏幕宽度的80%
  return appWidth < screenWidth * 0.8;
}
window.addEventListener('resize', () => {
  const isSplit = checkSplitScreen();
  document.body.classList.toggle('split-screen', isSplit);
  // 分屏时调整布局（如减小字体、简化界面）
  if (isSplit) {
    document.documentElement.style.setProperty('--font-size-scale', '0.9');
  } else {
    document.documentElement.style.setProperty('--font-size-scale', '1');
  }
});

• 分屏状态下的 CSS 适配：

:root {
  --font-size-scale: 1;
}
.text {
  font-size: calc(1rem * var(--font-size-scale));
}
.split-screen .complex-component {
  display: none; /* 分屏时隐藏复杂组件 */
}

多终端适配的通用保障措施

1. 自动化测试覆盖：

• 引入Playwright或Cypress等自动化测试工具，编写多终端适配测试用例，定期执行确保适配稳定性：

// Playwright测试用例：验证电视端布局
const { test, expect } = require('@playwright/test');
test('电视端4K分辨率布局验证', async ({ page }) => {
  await page.setViewportSize({ width: 3840, height: 2160 }); // 模拟4K电视
  await page.goto('http://localhost:3000');
  // 验证元素间距是否符合电视端要求
  const btnSpacing = await page.evaluate(() => {
    const btns = document.querySelectorAll('.btn');
    return window.getComputedStyle(btns[1]).marginLeft;
  });
  expect(btnSpacing).toBe('24px'); // 电视端按钮间距要求24px
});

2. 用户反馈收集与迭代：

• 在应用中添加反馈入口，收集不同终端用户的适配问题。针对高频问题（如某型号折叠屏展开后布局错乱），快速迭代修复：

<!-- 反馈入口组件（仅在适配异常时显示） -->
<div class="adaptation-feedback" style="display: none;">
  <p>当前页面适配可能存在问题，是否反馈？</p>
  <button onclick="submitFeedback()">提交反馈</button>
</div>
<script>
  // 检测到布局异常时显示反馈入口（如元素重叠）
  function checkLayoutError() {
    const elements = document.querySelectorAll('*');
    for (const el of elements) {
      const rect = el.getBoundingClientRect();
      // 元素超出视口或与其他元素重叠
      if (rect.right > window.innerWidth || rect.bottom > window.innerHeight) {
        document.querySelector('.adaptation-feedback').style.display = 'block';
        break;
      }
    }
  }
  window.addEventListener('load', checkLayoutError);
</script>