从零开始：为什么我的个人博客必须做“响应式设计”？

2025-01-12 | 类别：前端开发笔记 (Frontend Development)

作为一个刚入门前端的生信人，我原本以为网页只要在电脑上能看就行。直到我在手机上打开了自己的作品……简直是灾难。

1. 什么是 Mobile First？

Mobile First（移动优先）不仅仅是代码即使，更是一种设计策略。它要求我们先考虑屏幕最小、内容最核心的移动端场景，然后再为大屏幕添加更复杂的布局。

2. 关键技术：Media Queries

CSS3 引入的 Media Queries 是实现响应式设计的核心。通过它，我们可以针对不同的屏幕宽度应用不同的样式。

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

3. 我的 CSS 布局草图

在设计这个博客时，我画了很多草图。最终决定采用最经典的“上-中(左文右旁)-下”结构，但在手机上会自动折叠成垂直流式布局。

总结

响应式设计让我的博客不仅在电脑上看起来专业，在手机和平板上也能提供良好的阅读体验。这是现代 Web 开发的基本功。