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

为多说评论框添加响应式设计中我们让多说评论框在较小的屏幕上得以正常显示,现在多说又添加了一些新功能,导致在小屏幕设备上显示的效果又变得不好了.

官方要是不推出自己的响应式版本,我们这些用户就要无限的对它进行CSS修改,这样太麻烦了,希望这是我最后一次修改了.

删掉排序功能

首先是”最新”,“最早”,”最热”这三个排序功能,它遮挡了查看”新浪微博”和”腾讯微博”的按钮.

为了使我们的CSS修改尽量小,不应该添加太多的代码让它能够兼容显示在小屏幕设备上,事实上排序功能的使用频率是相当低的,我的选择是删掉它.

将#ds-thread #ds-reset .ds-sort从文档流中去除,代码如下:

#ds-thread #ds-reset .ds-sort{ display:none; }

调整嵌套评论的缩进

在上一篇文章中,我们调整后的嵌套评论是直接显示在最左边的,这样看起来会很不舒服.

调整margin的话会导致每个嵌套评论都产生缩进,所以这里是修改padding-left属性.

为每个评论的第一级ul.ds-children添加一条padding样式,代码如下:

#ds-thread #ds-reset>ul.ds-comments>li.ds-post>ul.ds-children{
    padding-left:30px;
}

本次修改后的效果

修改自定义CSS代码

与上一篇文章中的代码进行合并,得到如下新代码:

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

将其添加到多说的自定义CSS中即可.