省流地址： https://sinan.fun （注意在移动端体验哦）
前言
在上周发帖「学两个月前端后做了个这样的网站」后，V 友建议希望能适配下移动端，于是搁置了之前的优化任务，开始了响应式的学习。
开始
还是跟之前一样，降低要求，初版适配只要内容能正常显示就行。
现在的问题是原先只考虑了 pc 端，移动端宽度不够，导致挤压到了一起。
不同端主要的差异在于「分辨率大小」和「侧边栏展示逻辑」...响应式适配初版的想法，便是移动端适当调整布局宽高、边距、字体大小，pad 端稍微调整主题内容宽度，整体效果可以与 pc 保持一致。
调整布局宽高、边距、字体大小比较容易，又到了头疼的设计环节，移动端的侧边栏放哪？
- 方案一：侧边栏收缩，比如收缩至顶部 Logo 左侧，点击抽屉式展开（中规中矩，可以作为备选方案）
- 方案二：悬浮球式菜单，点击后从页面中间展开（灵感来源于 ios 中的悬浮球，考虑到用户资料页菜单数量较多，不合适）
- 方案三：滑动屏幕侧边拖出菜单（灵感来源于 harmonyos 的智慧多窗，感觉效果不错）
效果
最终实现是在方案三的基础上稍作调整，由底部点击唤起侧边栏菜单。
- 首页
- 首页（暗黑模式）
- 内容详情页
- 内容详情页（暗黑模式）
欢迎 V 友们体验反馈： https://sinan.fun
1
Select Language