1.增加主窗口自适应

在上一期文章中，我们把id为main的主div宽度修改为页面的95%。但在页面缩小的时候却会出现横向滚动条。一查样式表，发现是main的min-width选项导致的：

解决办法就是把min-width的宽度改为0px，这样就可以无限缩小，不产生横向滚动条了。为了避免两条规则冲突，就在这条规则后面加上了!important，将这条规则设置为最高优先级。好了，问题迎刃而解！

#main{
    min-width: 0px !important;
}

2.调整标题栏样式

将博客发布后，发现了一个重要问题：看官老爷们不知道我是谁。。。页面的顶端缺少标题，一个"Hi,there!"看起来很尴尬：

于是我稍微改进了一下，加入了导航条，效果是这样的：

文章目录页是布局最乱的地方，需要好好"调教"一下！

首先是日期在移动端的重叠问题：

将top:40px元素禁用掉会发现，原来标题和日期是两个分离的元素：

.dayTitle{
    float:none !important;
    top:0px !important;
    text-align:center;
}

这段代码把top改成了0px，文字进行居中，但效果不尽人意：

还是直接隐藏日期吧：

.dayTitle{
    display:none;
}

文章缩略图会根据自己的大小按比例显示，这就导致了图片大小参差不齐：

一开始的想法是把图片的宽度都设置成100%，高度让它自动缩放。但这样高度不会缩放，而是会变形，这时可以定义一个max-height:10000px，他就开始自动缩放了。高度不缩放可能是CSS标准没写明的地方，但定义max-height可能就会触发浏览器重载图片，达到目的。代码如下：

.c_b_p_desc img{
    width:100%;
    max-height:10000px;
}

分别在Windows7下的Chrome 75.0.3770.142和Android P默认浏览器下进行的测试，结果如图：

总体来说实现了移动端和PC端的兼容，优化了手机用户的体验。