上周末整理博客时发现个挺尴尬的事：在手机上看自己写的旅游攻略页面，图片把屏幕撑爆了，评论区按钮叠在菜单栏上死活点不到。这才想起来当初图省事只做了电脑版，趁着周一调休赶紧把响应式改版给安排了。
第一步：把框架的腿接上
翻出半年前写的Django项目，先往*里怼了个Bootstrap的CDN。之前嫌框架太笨重一直硬撸CSS，这回直接认怂：
<link href="第三方CDN地址" rel="stylesheet">
<script src="第三方脚本地址"</script>
重点来了：在<head>里加了个救命标签，没这玩意手机浏览器会假装自己是电脑屏：
<meta name="viewport" content="width=device-width, initial-scale=1">第二步：暴力改造导航栏
原本的导航菜单是用<div>硬堆的，电脑上看挺整齐，到手机上直接表演叠罗汉。直接拆了重做成Bootstrap组件：
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#我的菜单">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="我的菜单">
<!-- 原来的菜单项往里扔 -->
</div>
</nav>
这里被坑了半小时，忘给按钮加data-target属性，手机屏幕上点了八百遍汉堡图标死活没反应。
第三步：网格系统救命
攻略详情页最要命的是景点图册，六张图片并排在手机上挤成沙丁鱼罐头。把Django循环输出的部分裹上网格：
<div class="row">
{% for photo in travel_photos %}
<div class="col-12 col-md-4 mb-4">
<img src="{{ * }}" class="img-fluid">
</div>
{% endfor %}
</div>
关键技巧：
1. img-fluid让图片变成橡皮筋效果
2. col-12在手机上强制单列
3. col-md-4让平板以上显示三列
第四步：手工缝补漏网之鱼
改到评论区才发现点赞按钮溢出屏幕，Bootstrap没覆盖到的角落得自己写媒体查询：
@media (max-width: 768px) {
.comment-btn {
padding: 8px 12px;
font-size: 14px;
.reply-box {
margin-left: 0 !important;
用Chrome开发者工具反复开关设备工具栏测试，尤其注意横屏时的显示效果，安卓机总在这出事。
捅了马蜂窝
全部改完用旧手机测试，发现三星浏览器里导航栏还是错位。被迫在Django设置里加了这行：
DEBUG = False # 本地测试时改成True！
原来开发模式下的静态文件路径在部分手机浏览器会抽风，关调试模式立马正常。这个坑从下午三点埋到吃晚饭才填平。
现在手机访问终于能看了，虽然还有些边角不够完美，但至少不会让读者以为是乱码网页。下次再做Django项目，绝对第一时间把响应式框架焊死在项目里！
