为多说评论框添加响应式设计

本博客的常客罗佳告诉我多说评论框在iPhone上的显示效果不理想,我用响应式工具和手机查看了一下,确实存在严重问题.既然官方没有解决,那我就只能自己动手了.

修改层级评论的显示位置

层级评论的显示位置会逐级向右偏移,在移动设备上显示的效果就是评论内容的文字都被挤在了一起,显示效果如图所示.

通过开发者工具可以发现#ds-thread #ds-reset ul.ds-children这类元素被加上了38px的左填充.

把这个填充去掉,查看效果:

得出修改层级评论的CSS代码:

#ds-thread #ds-reset ul.ds-children{
    margin-left:0;
}

修改评论输入框

评论框的问题也比较明显,一是左边的头像占了太多的位置,二是”不想登录?直接…”等文字掩盖了图标,显示效果如图所示.

通过开发者工具在#ds-thread #ds-reset .ds-replybox .ds-avatar元素上添加一个display:none.

在#ds-thread #ds-reset .ds-sync元素上也添加一个display:none.

这时我们已经隐藏掉了头像和掩盖住图标的文字.

但是评论框的左侧仍然空出一大块地方(先前被头像占据的区域).

通过将#ds-thread #ds-reset .ds-replybox的padding样式取消就可以让评论框填满左侧的空白.

完成的效果如图所示:

得出CSS代码:

#ds-thread #ds-reset .ds-replybox .ds-avatar,
#ds-thread #ds-reset .ds-sync{
    display:none;
}
#ds-thread #ds-reset .ds-replybox{
    padding-left:0;
}

添加媒体查询

我博客使用的是Twenty Twelve主题,本身就有响应式设计,所以我们新添加的CSS代码也要配合主题的响应式设计.

在主题的css文件里可以看到视图宽度600px为两种显示效果的分界线.

于是我们把代码修改成这样:

@media screen and (max-width: 600px) {
    #ds-thread #ds-reset .ds-replybox .ds-avatar,
    #ds-thread #ds-reset .ds-sync{
        display:none;
    }
    #ds-thread #ds-reset ul.ds-children{
        margin-left:0;
    }
    #ds-thread #ds-reset .ds-replybox{
        padding-left:0;
    }
}

为多说评论框添加自定义CSS

在多说评论框的后台里可以自定义添加CSS.

将上面的CSS代码填写进去,保存即可.

新增补充文章:为多说评论框添加响应式设计 Ver 2.0