面试题：JavaScript实现跨设备响应式设计中CSS变量与主题切换的深度集成

整体架构设计

HTML结构：构建具有语义化的HTML结构，便于样式和脚本的操作。将页面分为不同的区域，如header、main、footer等，确保内容结构清晰。
CSS样式：采用CSS变量来管理主题相关的颜色、字体等样式。使用媒体查询（Media Queries）针对不同设备（桌面、平板、手机）设置不同的布局和样式，以实现响应式设计。
JavaScript逻辑：负责监听主题切换事件，动态修改CSS变量的值，从而实现主题的切换。同时，处理不同设备上的交互逻辑，如触摸事件等。
文件组织：将CSS、JavaScript和HTML文件进行合理的分离和组织，便于维护和管理。例如，将不同主题的样式放在单独的CSS文件中，通过JavaScript进行加载和切换。

关键技术点

CSS变量：通过 --variable-name 的形式定义变量，如 --primary-color: #007bff;。在需要使用的地方通过 var(--variable-name) 引用，方便在JavaScript中动态修改。
媒体查询：使用 @media 规则，根据设备的屏幕宽度、高度、分辨率等特性来应用不同的样式。例如：

@media (max-width: 768px) {
  /* 手机样式 */
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* 平板样式 */
}
@media (min-width: 1025px) {
  /* 桌面样式 */
}

JavaScript操作CSS变量：通过 document.documentElement.style.setProperty('--variable-name', 'new - value') 来动态修改CSS变量的值。
性能优化：
- 图片优化：使用合适的图片格式（如WebP），根据设备分辨率加载不同尺寸的图片。
- 代码压缩：压缩CSS和JavaScript代码，减少文件大小，加快加载速度。
- 懒加载：对于非首屏的图片、脚本等资源采用懒加载的方式，提高页面的初始加载性能。

核心代码实现

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Responsive Web App with Theme Switch</title>
</head>

<body>
  <header>
    <h1>My Responsive Web App</h1>
    <button id="theme-switch">Switch Theme</button>
  </header>
  <main>
    <p>Content goes here...</p>
  </main>
  <footer>
    &copy; 2024 My Company
  </footer>
  <script src="script.js"></script>
</body>

</html>

CSS部分（styles.css）

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
}

body {
  background-color: var(--background-color);
  color: var(--secondary-color);
  font-family: Arial, sans-serif;
}

header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
}

button#theme-switch {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* 媒体查询 */
@media (max-width: 768px) {
  header h1 {
    font-size: 24px;
  }
}

JavaScript部分（script.js）

const themeSwitch = document.getElementById('theme-switch');
let isDarkTheme = false;

themeSwitch.addEventListener('click', () => {
  if (isDarkTheme) {
    document.documentElement.style.setProperty('--primary-color', '#007bff');
    document.documentElement.style.setProperty('--secondary-color', '#6c757d');
    document.documentElement.style.setProperty('--background-color', '#f8f9fa');
  } else {
    document.documentElement.style.setProperty('--primary-color', '#343a40');
    document.documentElement.style.setProperty('--secondary-color', '#ced4da');
    document.documentElement.style.setProperty('--background-color', '#212529');
  }
  isDarkTheme =!isDarkTheme;
});

星途面试题库

面试题：JavaScript实现跨设备响应式设计中CSS变量与主题切换的深度集成

知识考点

面试题答案

整体架构设计

关键技术点

核心代码实现