如何调教你的博客Episode2——移动端支持和UI美化
这个系列的文章是我在搭建博客园博客时所经历的过程。
在上一期如何调教你的博客Episode1——修改整体样式中,我们通过添加CSS样式,修改了页面的总体布局。但将文章发出之后,博客的布局就出现问题了:
由于总体布局的修改,导致了博客园的默认样式无法工作。另外在移动端中会出现横向滚动条。让我们继续魔改这个博客吧!
1.增加主窗口自适应
在上一期文章中,我们把id为main的主div宽度修改为页面的95%。但在页面缩小的时候却会出现横向滚动条。一查样式表,发现是main的min-width选项导致的:
解决办法就是把min-width的宽度改为0px,这样就可以无限缩小,不产生横向滚动条了。为了避免两条规则冲突,就在这条规则后面加上了!important,将这条规则设置为最高优先级。好了,问题迎刃而解!
#main{ min-width: 0px !important; }
2.调整标题栏样式
将博客发布后,发现了一个重要问题:看官老爷们不知道我是谁。。。页面的顶端缺少标题,一个"Hi,there!"看起来很尴尬:
于是我稍微改进了一下,加入了导航条,效果是这样的:
3.调整日期在移动端重叠的问题
文章目录页是布局最乱的地方,需要好好"调教"一下!
首先是日期在移动端的重叠问题:
将top:40px元素禁用掉会发现,原来标题和日期是两个分离的元素:
.dayTitle{ float:none !important; top:0px !important; text-align:center; }
这段代码把top改成了0px,文字进行居中,但效果不尽人意:
还是直接隐藏日期吧:
.dayTitle{ display:none; }
4.为缩略图设置统一大小
文章缩略图会根据自己的大小按比例显示,这就导致了图片大小参差不齐:
一开始的想法是把图片的宽度都设置成100%,高度让它自动缩放。但这样高度不会缩放,而是会变形,这时可以定义一个max-height:10000px,他就开始自动缩放了。高度不缩放可能是CSS标准没写明的地方,但定义max-height可能就会触发浏览器重载图片,达到目的。代码如下:
.c_b_p_desc img{ width:100%; max-height:10000px; }
5.测试结果
分别在Windows7下的Chrome 75.0.3770.142和Android P默认浏览器下进行的测试,结果如图:
总体来说实现了移动端和PC端的兼容,优化了手机用户的体验。