省流地址：sinan.fun （注意在移动端体验哦）
前言
在上周发帖「学两个月前端后做了个这样的网站」后，收到蛮多反馈，较多朋友们是希望能适配下移动端，于是搁置了之前的优化任务，开始了响应式的学习。
开始
还是跟之前一样，降低要求，初版适配只要内容能正常显示就行。
现在的问题是原先只考虑了pc端，移动端宽度不够，导致挤压到了一起。
不同端主要的差异在于「分辨率大小」和「侧边栏展示逻辑」...响应式适配初版的想法，便是移动端适当调整布局宽高、边距、字体大小，pad 端稍微调整主题内容宽度，整体效果可以与 pc 保持一致。
调整布局宽高、边距、字体大小比较容易，又到了头疼的设计环节，移动端的侧边栏放哪？
有的选择将侧边栏放到主体内容底部，可首页和内容页都有底部无限加载，存在冲突；多数选择是将侧边栏收缩，比如收缩至顶部 Logo 左侧，点击抽屉式展开，中规中矩，可以作为备选方案；
再继续找参考的过程中，发现手机上有悬浮球式菜单，点击后从页面中间展开，用户资料页菜单有十多个，屏幕中间应该放不下...
还有这种的，滑动屏幕侧边拖出菜单，感觉效果不错。
学习响应式
先看一下文档 responsive-design
text
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',需要理解 tailwind 的 mobile first 概念。比如原先 pc 端写 max-w-6xl 现在到了移动端，明显宽度超了，结合文档中的 sm 、md 、lg、 xl，很可能会写出 sm:max-w-3xl max-w-6xl这样的样式，其实应该写成 max-w-3xl lg:max-w-6xl（那sm:max-w-3xl max-w-6xl 是啥呢，sm 以上分辨率的屏幕最大宽度 3xl 而小于 sm 分辨率的6xl，刚好相反）这个理解后响应式就简单了。
图纸和理论基础都有了，移动端分辨率在 sm 以下，pad 端在 md ~ lg 区间，pc 端在 xl 以上，移动端考虑侧边栏收缩至底部，点击后屏幕右侧展开（参考上面第三种）。
剩下需要考虑的是如何将侧边栏收缩至底部？
- 重新写一套逻辑会包含：首页右侧分类筛选、内容详情页左侧点赞、收藏等，用户资料页左侧的菜单导航。分类筛选和菜单导航简单，只是页面跳转，但是内容详情页的点赞收藏会涉及一些业务逻辑，会很多冗余代码
- 直接将侧边栏组件缩放至底部，可以复用组件业务逻辑。由于之前的侧边栏都包含有图标，缩放至底部时只保留图标，文字隐藏。
到此，侧边栏响应式逻辑上基本自洽了。
效果
- 首页
- 首页（暗黑模式）
- 内容详情页
- 内容详情页（暗黑模式）
- 用户资料页
- 用户资料页（暗黑模式）
一个小插曲，实现过程中，由于是将侧边栏 组件直接丢至底部，使底部菜单具备了调用任何页面组件的能力，比如，trending 页中间部分的筛选现在也可以放到底部。
欢迎掘金朋友们体验反馈：sinan.fun/