Kratos 主题移动端的文章显示的优化

2017年4月30日 936 次阅读 3 条评论 6 人点赞

Kratos 主题内容的显示,col 的边框外面还有边框,这样会让显示内容以卡片的形式呈现,会比较模块化和美观化。但是在移动端,本来移动端屏幕显示就是窄,如果还是以这样的形式展现的话,两个边框会让显示内容更加狭小。

如上图所示,两边有太多空余的地方,在手机移动端显示的时候,如果我们去掉两边的 padding,应该会好很多。现在我们对主题进行修改。

如果对主题进行修改,我建议,应该把原主题以子主题的形式独立出来,对子主题进行修改这样不会影响你的修改点,也不会影响原主题的更新升级。关于如何制作子主题,修改子主题可以参看这里。但是如果你嫌麻烦,也可以直接在原主题上修改。修改样式表 style.css 文件。

修改完毕保存上传的修改好的 style.css。我们再次刷新页面,看看效果。

看,这样是不是好了很多?对移动端的浏览友好了很多。对了,由于上面修改的代码添加了 @media screen and (max-width: 768px) 这样会有响应式处理,不会影响 PC 端的显示浏览。

标签: 暂无
最后编辑:2017年4月30日

我就是我,是颜色不一样的烟火。

文章评论(3)

  • 1

    :twisted: :lol: :idea: :confused: :eek: :surprised: :redface: :smile:

    2017年7月11日
  • milkice

    感谢代码提供 已集成入Kratos-M

    2018年1月21日