继上次修改了主题的底部字体大小之后,今天我又把内容布局给整宽一些了,个人感觉这样对阅读体验更佳。

效果直接参考本博客即可。

关键点:修改了自适应中对主要文章内容的最大宽度。同时也把字号和代码的行高整一下,看起来更舒服,把下面的代码写入主题设置的自定义 HTML 元素拓展 - 标签: head 尾部

<style type="text/css" >
    #footer {
        font-size: 0.9rem;
        line-height: 30px;
    }

    .post-content,
    .post-content ul li{
        font-size: 1.2em !important;
    }

    .post-content code {
        font-size: 0.9em !important;
    }

    .comment-content pre code ul {
        font-size: 1.03em !important;
    }

    .post-content pre {
        line-height: 1.97em !important;
    }


    @media screen and (min-width: 768px) and (max-width: 1250px) {
        .container {
            max-width: 740px
        }
    }

    @media screen and (min-width: 1251px) and (max-width: 1599px) {
        .container {
            max-width: 985px;
        }

    }

    @media screen and (min-width: 1600px) and (max-width: 1799px) {
        .container {
            max-width: 1400px
        }
    }

    @media screen and (min-width: 1800px) and (max-width: 1919px) {
        .container {
            max-width: 1500px
        }
    }

    @media screen and (min-width: 1920px) and (max-width: 2399px) {
        .container {
            max-width: 1600px
        }
    }

    @media screen and (min-width: 2400px) {
        .container {
            max-width: 1900px
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1301px) {

        body.serif-fonts .container,
        body.content-lang-en .container {
            max-width: 900px
        }
    }
</style>


腾讯云社区邀请各位技术博主加入,福利多多噢!
Last modification:August 14th, 2020 at 04:08 pm
如果觉得我的文章对你有用,请随意赞赏