从0撸一个响应式框架，原来是这样的！

前端

2023-11-03 03:46:53

打造响应式网站框架：逐步指南

在当今移动优先的时代，创建响应式网站至关重要。它确保您的网站在所有设备上都能顺畅运行，无论屏幕尺寸如何。虽然一开始可能看起来很艰巨，但遵循以下步骤，您可以轻松打造一个响应式框架。

第一步：准备工作

要开始，您需要以下工具：

文本编辑器（例如 Visual Studio Code）
构建工具（例如 Gulp 或 Webpack）
浏览器（例如 Chrome 或 Firefox）

第二步：创建项目结构

组织良好的项目结构至关重要。创建以下文件夹和文件：

文件夹：

css
js
img
fonts

文件：

index.html
style.css
script.js

第三步：添加基本样式

在 style.css 中添加基本的文本和布局样式：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

第四步：添加响应式样式

使用媒体查询为不同的屏幕尺寸设置响应式样式：

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

  h1 {
    font-size: 20px;
  }

  p {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }

  h1 {
    font-size: 18px;
  }

  p {
    font-size: 12px;
  }
}

第五步：添加 JavaScript

在 script.js 中添加 JavaScript 以检测设备屏幕宽度并相应地添加/删除类：

const body = document.body;

window.addEventListener('resize', () => {
  if (window.innerWidth < 768) {
    body.classList.add('mobile');
  } else {
    body.classList.remove('mobile');
  }
});

第六步：测试框架

在浏览器中打开 index.html。调整窗口大小，观察布局如何响应。

第七步：优化框架

根据需要进一步优化框架：