@media screen and (min-width: 768px) {
    #home {
        margin: 0 auto;
        width: 80%;
        /*原始65*/
        min-width: 980px;
        /*页面顶部的宽度*/
        background-color: rgba(245, 245, 245, 0.7);
        padding: 30px;
        margin-top: 50px;
        margin-bottom: 50px;
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    }

    body {
        background: #8377cc url('https://photocdn.sohu.com/20110722/Img314235964.jpg') fixed no-repeat;
        background-position: 50% 5%;
        background-size: cover;
    }

    #blogTitle {
        height: 100px;
        /*高度*/
        clear: both;
        background-color: rgba(245, 245, 245, 0);
    }

    #blogTitle h1 {
        font-size: 36px;
        font-weight: bold;
        line-height: 1.8em;
        /*原始 1.6em*/
        margin-top: 10px;
        /*原始 15px */
        color: #548B54;
    }

    #blogTitle h2 {
        font-weight: normal;
        font-size: 17px;
        /*原始 16px ；font-size: 1.0rem;*/
        line-height: 1.8;
        color: #111;
        font-weight: bold;
        text-align: right;
        float: right;
    }

    #navigator {
        background-color: #8377cc;
    }

    #navList a:link,
    #navList a:visited,
    #navList a:active {
        color: #eee;
        font-size: 18px;
        font-weight: bold;
    }

    .blogStats {
        color: #eee;
    }

    .postTitle {
        border-left: 8px solid #8377cc;
        margin-left: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        float: right;
        width: 100%;
        clear: both;
    }

    .postTitle a:link,
    .postTitle a:visited,
    .postTitle a:active {
        color: #21759b;
        transition: all 0.4s linear 0s;
    }

    .postTitle a:hover {
        margin-left: 30px;
        color: #0f3647;
        text-decoration: none;
    }

    .postCon {
        float: right;
        line-height: 1.5em;
        width: 100%;
        clear: both;
        padding: 10px 0;
    }

    .day .postTitle a {
        padding-left: 10px;
    }

    .day {
        background: rgba(255, 255, 255, 0.5);
    }

    /*文章附加信息*/
    .postDesc {
        background: url(images/posted_time.png) no-repeat 0 1px;
        color: #757575;
        float: left;
        width: 100%;
        clear: both;
        text-align: left;
        font-family: "微软雅黑", "宋体", "黑体", Arial;
        font-size: 13px;
        padding-right: 20px;
        /*5px  padding-left: 90px;posted 发表时间左边距离*/
        margin-top: 20px;
        line-height: 1.8;
        padding-bottom: 35px;
    }

    .newsItem,
    .catListEssay,
    .catListLink,
    .catListNoteBook,
    .catListTag,
    .catListPostCategory,
    .catListPostArchive,
    .catListImageCategory,
    .catListArticleArchive,
    .catListView,
    .catListFeedback,
    .mySearch,
    .catListComment,
    .catListBlogRank,
    .catList,
    .catListArticleCategory,
    #blog-calendar {
        background: rgba(255, 255, 255, 0.5);
        margin-bottom: 35px;
        word-wrap: break-word;
    }

    .CalTitle {
        background: rgba(255, 255, 255, 0);
    }

    .catListTitle {
        background-color: #8377cc;
    }

    #topics {
        background: rgba(255, 255, 255, 0.5);
    }

    .c_ad_block {
        display: none;
    }

    #tbCommentBody {
        width: 100%;
        height: 200px;
        background: rgba(255, 255, 255, 0.5);
    }

    #q {
        background: rgba(255, 255, 255, 0);
    }

    .CalNextPrev {
        background: rgba(255, 255, 255, 0);
    }

    .cnblogs_code {
        background: rgba(255, 255, 255, 0);
    }

    .cnblogs_code div {
        background: rgba(255, 255, 255, 0);
    }

    .cnblogs_code_toolbar {
        background: rgba(255, 255, 255, 0);
    }

    .entrylist {
        background: rgba(255, 255, 255, 0.5);
    }

    #main {
        min-width: 640px;
    }

    .postBody blockquote {
        border: none;
        /*github样式搬过来*/
        padding: 0 1em;
        color: #6a737d;
        border-left: 0.25em solid #dfe2e5;
        /*隐去默认的引号图片*/
        background: none;
        /*覆盖默认90%*/
        /*width: 100%;*/
    }

    .post {
        padding: 5px;
        background-color: rgba(255, 255, 255, 0.5);
    }
}

@media screen and (max-width: 768px) {
    #footer{
         color: #222222;
         margin: 10px; 
    }

    #main,
    #mainContent {
        width: 100%;
    }

    #sideBar,
    body>a,
    #navList,
    #navigator,
    .postDesc a,
    #homepage_top_pager {
        display: none;
    }

    #blogTitle a {
        font-size: 30px;
    }

    #blogTitle h2 {
        font-size: 16px;
    }

    #header {
        height: 80px;
    }

    #home {
        margin-top: 0px;
        margin-bottom: 0px;
        background-image: none;
        padding: 15px;
    }

    .postTitle a {
        font-size: 22px;
    }

    .postCon,
    .postCon a {
        font-size: 16px;
    }

    .day {
        margin: 0 2%;
    }
    .day {
        background: rgba(255, 255, 255, 0.5);
        margin-bottom: 10px; 
    }

    .postCon a {
        padding-left: 0;
    }

    .postDesc {
        width: 100%;
        font-size: 12px;
    }

    #home {
        background: #8377cc url('https://photocdn.sohu.com/20110722/Img314235964.jpg') fixed no-repeat;
        background-position: 50% 5%;
    }

    #mainContent .forFlow {
        margin: 4px 0 0 0;
    }

    .postBody {}

    #blogTitle {
        left: 0;
    }

    #mainContent .postBody {
        width: 100%;
    }

    .post {
        padding: 0 4%;
    }

    .topicListFooter {
        width: 100%;
        text-align: center;
        padding: 0;
        height: 40px;
    }

    .topicListFooter a:link {
        font-size: 12px;
    }
}