/* 超小屏幕（小于576px）布局容器的宽度为100% */
@media screen and (max-width:575px){
    .container{
        width:100%;
    }
    article.article-main-body{
        height:auto;
        margin:5px auto 0;
        padding:0;
    }
    .blog-detail-container{
        height:auto;
        margin:0 auto;
        padding:0;
        overflow:hidden;
    }
    .blog-detail{
        width:100%;
        height:auto;
        margin:0 0 5px;
        padding:10px;
        background:var(--backgroundColor);
        overflow:hidden;
    	display:block;
    }
    .blog-detail .blog-category{
        width:100%;
        height:auto;
        font-size:1.6rem;
        padding:0 0 15px;
        overflow:hidden;
    }
    .blog-detail h1{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:3.5rem;
        color:var(--titleColor);
        font-weight:bold;
        border-left:5px solid var(--redColor);
        margin:0;
        padding:0 0 0 10px;
        overflow:hidden;
    }
    .blog-detail .needPassword{
        text-align:center;
        padding-top:100px;
        padding-bottom:100px;
    }
    .blog-detail .needPassword h3{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        overflow:hidden;
    }
    .needPasswordLi{
        width:100%;
        height:auto;
        margin:2rem 0;
    }
    .needPasswordLi label{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:1.6rem;
        color:var(--titleColor);
        display:inline-block;
    }
    input.addArticlePassword{
        width:358px;
        height:30px;
        line-height:30px;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:left;
        border-style:solid;
        background:#fff;
        display:inline-block;
        padding-left:10px;
    }
    .needPasswordBtn{
        width:100%;
        height:auto;
        margin:20px 0 0;
    }
    .needPasswordBtn input{
        width:auto;
        height:35px;
        line-height:35px;
        font-size:14px;
        color:#fff;
        text-align:center;
        border:none;
        background:var(--blueColor,#236ddb);
        display:inline-block;
        margin:0;
        padding:0 20px;
        cursor:pointer;
    }
    .blog-info{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:1.6rem;
        color:var(--subTitleColor);
        border-left:5px solid var(--redColor);
        margin-bottom:10px;
        padding:10px 0 0 10px;
        overflow:hidden;
    }
    .blog-info i{
        color:var(--greenColor);
        margin-right:3px;
    }
    .blog-info a{
        color:var(--subTitleColor);
    }
    .blog-info a:hover{
        color:var(--blueColor,#236ddb);
    }
    .summary{
        width:100%;
        height:auto;
        line-height:160%;
        font-size:1.6rem;
        color:var(--subTitleColor);
        text-indent:2em;
        background:url("../../static/img/quote.png") left 10px no-repeat;
        background-size:20px 20px;
        margin:10px 0 0;
        padding:10px 0;
        overflow:hidden;
    }
    .blog-content{
        width:100%;
        height:auto;
        line-height:160%;
        font-size:1.6rem;
        color:var(--subTitleColor);
        padding:20px 0 0;
        overflow:hidden;
    }
    .blog-content img,.blog-content p img,.blog-content div img{
        max-width:100%;
    }
    .blog-content blockquote{
        color:var(--subTitleColor);
        text-indent:0;
        border-left:5px solid red;
        background:#fff;
        margin-left:0;
        margin-right:0;
        padding:10px;
    }
    .blog-content blockquote p{
        color:var(--subTitleColor);
        text-indent:0;
    }
    .blog-content pre{
        text-indent:0;
        background:rgba(26,26,26,1);
        padding:20px;
    }
    .blog-content code{
        color:green;
        word-break:break-all;/* 强制换行 */
        word-wrap:break-word;/* 强制换行 */
        white-space:pre-line;/* 强制换行 */
    }
    .blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4,.blog-content h5,.blog-content h6{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        text-indent:0;
        padding:0 0 10px;
        display:block;
        overflow:hidden;
    }
    .blog-content p,.blog-content li{
        width:100%;
        height:auto;
        line-height:160%;
        font-size:1.6rem;
        color:var(--titleColor);
        margin:0;
        padding:0 0 10px;
        overflow:hidden;
    }
    .blog-content a{
        color:var(--blueColor,#236ddb);
    }
    .blog-content a:hover{
        color:red;
    }
    .blog-tag{
        width:100%;
        height:auto;
        padding:20px 0;
        border-bottom:1px solid var(--borderColor);
    }
    .blog-tag span{
        font-size:1.6rem;
    }
    .blog-tag a{
        width:auto;
        height:3rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--titleColor);
        padding:0 5px 0 0;
        display:inline-block;
    }
    .blog-tag a:hover{
        color:var(--blueColor,#236ddb);
    }
    .preNext{
        width:100%;
        height:auto;
        margin:5px 0 0;
        padding:20px 0;
        overflow:hidden;
    }
    .pre{
        width:48%;
        height:auto;
        line-height:140%;
        font-size:1.6rem;
        color:var(--subTitleColor);
        display:inline-block;
        float:left;
        overflow:hidden;
    }
    .next{
        width:48%;
        height:auto;
        line-height:140%;
        font-size:1.6rem;
        color:var(--subTitleColor);
        text-align:right;
        display:inline-block;
        float:right;
        overflow:hidden;
    }
    .pre a,.next a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:1.6rem;
        color:var(--titleColor);
    }
    .pre a:hover,.next a:hover{
        color:var(--blueColor,#236ddb);
    }
    .articleLeftShare{
        width:48px;
        height:auto;
        position:fixed;
        top:220px;
        left:50%;
        margin-left:-668px;
        z-index:99999;
    }
    .articleLeftShare a{
        width:48px;
        height:auto;
        cursor:pointer;
        display:block;
    }
    .articleLeftShareIcon{
        width:48px;
        height:48px;
        background:#f8f8f8 url("../../static/img/good-two.png") center center no-repeat;
        background-size:24px 24px;
        border-radius:50%;
        display:block;
    }
    .articleLeftShare a:hover .articleLeftShareIcon{
        background:#f8f8f8 url("../../static/img/good-two-hover.png") center center no-repeat;
        background-size:24px 24px;
        border-radius:50%;
    }
    .articleLeftShareIconClick{
        width:48px;
        height:48px;
        background:rgb(137,207,240,0.2) url("../../static/img/good-two-click.png") center center no-repeat;
        background-size:24px 24px;
        border-radius:50%;
        display:block;
    }
    .articleLeftShareTitle{
        width:48px;
        height:20px;
        line-height:20px;
        font-size:12px;
        color:#fff;
        text-align:center;
        display:block;
        margin-top:5px;
    }
    .articleLeftShareTitleClick{
        color:var(--blueColor,#236ddb);
    }
    .articleLeftShareLine{
        width:24px;
        height:1px;
        background:#e8e8e8;
        display:block;
        margin:16px auto 0;
    }
    .blog-about{
        width:100%;
        height:auto;
    	background:var(--backgroundColor);
    	margin-bottom:5px;
    	padding:10px;
    }
    .blog-about .avatar{
        width:65px;
        height:auto;
    }
    .blog-about .avatar img{
        width:65px;
        height:65px;
        border-radius:50%;
    }
    .blog-about .author{
        width:calc(100% - 75px);
        height:auto;
        margin-left:10px;
    }
    .blog-about .author .nickname{
        width:100%;
        height:40px;
        line-height:40px;
        font-size:1.6rem;
        color:var(--titleColor);
        margin:0;
        padding:0;
        overflow:hidden;
    }
    .blog-about .author .author-intro{
        width:100%;
        height:auto;
        line-height:25px;
        font-size:1.4rem;
        color:var(--subTitleColor);
        margin:0;
        padding:0;
    }
    .comment-title{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        background:var(--backgroundColor);
        margin:0px;
        padding:10px;
    }
    .comment-title small{
        font-size:1.2rem;
        color:var(--darkTitleColor);
        font-weight:bold;
        margin:0 0 0 5px;
        padding:0;
    }
    .comment-list{
        width:100%;
        height:auto;
        border-radius:0;
    	background:var(--backgroundColor);
    	margin:0 0 5px;
    	padding:5px 10px 10px;
    }
    .noComment{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--titleColor);
        text-align:center;
        margin:20px 0;
    }
    .comment-list .comment-item{
        width:100%;
        height:auto;
        border:1px solid var(--borderColor);
        background:none;
    	margin:0 0 5px;
    	padding:20px 0;
    }
    .comment-list .comment-item p{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
    	padding:5px 20px;
    }
    .comment-list .comment-item p.reply-comment-row{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        border-top:1px solid var(--borderColor);
        border-bottom:1px solid var(--borderColor);
        margin:0;
    	padding:5px 20px 5px 50px;
    }
    .comment-list .comment-item p a.username{
        color:deeppink;
        font-weight:bold;
        display:inline-block;
        margin-right:5px;
    }
    .comment-list .comment-item p.reply-comment-row a.username{
        color:var(--blueColor);
    }
    .comment-list .comment-item p .datetime{
        font-size:12px;
    }
    .comment-list .comment-item .content{
        color:var(--titleColor);
    }
    .comment{
        width:100%;
        height:auto;
        margin:0 0 5px;
        padding:0 10px 10px;
        background:var(--backgroundColor);
        overflow:hidden;
    	display:block;
    }
    .comment-row{
        height:auto;
        margin:0 0 10px;
        padding:0;
    }
    .comment-row label{
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.6rem;
        color:var(--titleColor);
        margin:0;
        padding:0;
    }
    .comment-row .captcha{
        width:auto;
        height:3.5rem;
        margin:0;
        padding:0;
    }
    .comment-row .captcha img{
        height:3.5rem;
    }
    .comment-row small{
        font-size:1.2rem;
        color:var(--lightColor);
        padding:0;
    }
    .comment-row input{
        font-size:1.4rem;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
    }
    .comment-row textarea{
        font-size:1.4rem;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
    }
    .commentUserInfo{
        width:100%;
        height:auto;
        margin-bottom:10px;
        position:relative;
    }
    input.commentInput{
        width:100%;
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.6rem;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
        padding:0 2%;
    }
    .commentUserInfo .captcha{
        width:auto;
        height:3.5rem;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
    }
    .commentUserInfo .captcha img{
        width:auto;
        height:3.5rem;
    }
    .commentTextarea{
        width:100%;
        height:auto;
        margin-bottom:10px;
    }
    .commentTextarea textarea{
        width:100%;
        height:9rem;
        line-height:2.5rem;
        font-size:1.6rem;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
        padding:0 2%;
    }
    .comment-btn{
        width:100%;
        height:auto;
        text-align:center;
        margin-top:20px;
    }
    .comment-btn button{
        font-size:1.6rem;
    }
}
/* 小屏幕（大于等于576px）布局容器的宽度为540px */
@media screen and (min-width:576px){
    .containner{
        width:540px;
    }
    article.article-main-body{
        height:auto;
        margin:5px auto 0;
        padding:0;
    }
    .blog-detail-container{
        height:auto;
        margin:0 auto;
        padding:0;
        overflow:hidden;
    }
    .blog-detail{
        width:100%;
        height:auto;
        margin:0 0 5px;
        padding:20px;
        background:var(--backgroundColor);
        overflow:hidden;
    	display:block;
    }
    .blog-detail .blog-category{
        width:100%;
        height:auto;
        font-size:14px;
        padding:0 0 15px;
        overflow:hidden;
    }
    .blog-detail h1{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:35px;
        color:var(--titleColor);
        font-weight:bold;
        border-left:5px solid var(--redColor);
        margin:0;
        padding:0 0 0 10px;
        overflow:hidden;
    }
    .blog-detail .needPassword{
        text-align:center;
        padding-top:100px;
        padding-bottom:100px;
    }
    .blog-detail .needPassword h3{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:20px;
        color:var(--titleColor);
        font-weight:bold;
        overflow:hidden;
    }
    .needPasswordLi{
        width:100%;
        height:auto;
        margin:20px 0;
    }
    .needPasswordLi label{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:14px;
        color:var(--titleColor);
        display:inline-block;
    }
    input.addArticlePassword{
        width:358px;
        height:30px;
        line-height:30px;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:left;
        border-style:solid;
        background:#fff;
        display:inline-block;
        padding-left:10px;
    }
    .needPasswordBtn{
        width:100%;
        height:auto;
        margin:20px 0 0;
    }
    .needPasswordBtn input{
        width:auto;
        height:35px;
        line-height:35px;
        font-size:14px;
        color:#fff;
        text-align:center;
        border:none;
        background:var(--blueColor,#236ddb);
        display:inline-block;
        margin:0;
        padding:0 20px;
        cursor:pointer;
    }
    .blog-info{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:14px;
        color:var(--subTitleColor);
        border-left:5px solid var(--redColor);
        margin-bottom:20px;
        padding:10px 0 0 10px;
        overflow:hidden;
    }
    .blog-info i{
        color:var(--greenColor);
        margin-right:3px;
    }
    .blog-info a{
        color:var(--subTitleColor);
    }
    .blog-info a:hover{
        color:var(--blueColor,#236ddb);
    }
    .summary{
        width:100%;
        height:auto;
        line-height:160%;
        font-size:14px;
        color:var(--subTitleColor);
        text-indent:2em;
        background:url("../../static/img/quote.png") left 10px no-repeat;
        background-size:20px 20px;
        margin:10px 0 0;
        padding:10px 0;
        overflow:hidden;
    }
    .blog-content{
        width:100%;
        height:auto;
        line-height:160%;
        font-size:14px;
        color:var(--subTitleColor);
        padding:20px 0 0;
        overflow:hidden;
    }
    .blog-content img,.blog-content p img,.blog-content div img{
        max-width:100%;
    }
    .blog-content blockquote{
        color:var(--subTitleColor);
        text-indent:0;
        border-left:5px solid red;
        background:#fff;
        margin-left:0;
        margin-right:0;
        padding:10px;
    }
    .blog-content blockquote p{
        color:var(--subTitleColor);
        text-indent:0;
    }
    .blog-content pre{
        text-indent:0;
        background:rgba(26,26,26,1);
        padding:20px;
    }
    .blog-content code{
        color:green;
        word-break:break-all;/* 强制换行 */
        word-wrap:break-word;/* 强制换行 */
        white-space:pre-line;/* 强制换行 */
    }
    .blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4,.blog-content h5,.blog-content h6{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:20px;
        color:var(--titleColor);
        font-weight:bold;
        text-indent:0;
        padding:0 0 10px;
        display:block;
        overflow:hidden;
    }
    .blog-content p,.blog-content li{
        width:100%;
        height:auto;
        line-height:160%;
        font-size:14px;
        color:var(--titleColor);
        margin:0;
        padding:0 0 10px;
        overflow:hidden;
    }
    .blog-content a{
        color:var(--blueColor,#236ddb);
    }
    .blog-content a:hover{
        color:red;
    }
    .blog-tag{
        width:100%;
        height:auto;
        padding:20px 0;
        border-bottom:1px solid var(--borderColor);
    }
    .blog-tag span{
        font-size:14px;
    }
    .blog-tag a{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:14px;
        color:var(--titleColor);
        padding:0 5px 0 0;
        display:inline-block;
    }
    .blog-tag a:hover{
        color:var(--blueColor,#236ddb);
    }
    .preNext{
        width:100%;
        height:auto;
        margin:5px 0 0;
        padding:20px 0;
        overflow:hidden;
    }
    .pre{
        width:48%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        display:inline-block;
        float:left;
        overflow:hidden;
    }
    .next{
        width:48%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:right;
        display:inline-block;
        float:right;
        overflow:hidden;
    }
    .pre a,.next a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--titleColor);
    }
    .pre a:hover,.next a:hover{
        color:var(--blueColor,#236ddb);
    }
    .articleLeftShare{
        width:48px;
        height:auto;
        position:fixed;
        top:220px;
        left:50%;
        margin-left:-668px;
        z-index:99999;
    }
    .articleLeftShare a{
        width:48px;
        height:auto;
        cursor:pointer;
        display:block;
    }
    .articleLeftShareIcon{
        width:48px;
        height:48px;
        background:#f8f8f8 url("../../static/img/good-two.png") center center no-repeat;
        background-size:24px 24px;
        border-radius:50%;
        display:block;
    }
    .articleLeftShare a:hover .articleLeftShareIcon{
        background:#f8f8f8 url("../../static/img/good-two-hover.png") center center no-repeat;
        background-size:24px 24px;
        border-radius:50%;
    }
    .articleLeftShareIconClick{
        width:48px;
        height:48px;
        background:rgb(137,207,240,0.2) url("../../static/img/good-two-click.png") center center no-repeat;
        background-size:24px 24px;
        border-radius:50%;
        display:block;
    }
    .articleLeftShareTitle{
        width:48px;
        height:20px;
        line-height:20px;
        font-size:12px;
        color:#fff;
        text-align:center;
        display:block;
        margin-top:5px;
    }
    .articleLeftShareTitleClick{
        color:var(--blueColor,#236ddb);
    }
    .articleLeftShareLine{
        width:24px;
        height:1px;
        background:#e8e8e8;
        display:block;
        margin:16px auto 0;
    }
    .blog-about{
        width:100%;
        height:auto;
    	background:var(--backgroundColor);
    	margin-bottom:5px;
    	padding:20px;
    }
    .blog-about .avatar{
        width:65px;
        height:auto;
    }
    .blog-about .avatar img{
        width:65px;
        height:65px;
        border-radius:50%;
    }
    .blog-about .author{
        width:calc(100% - 75px);
        height:auto;
        margin-left:10px;
    }
    .blog-about .author .nickname{
        width:100%;
        height:40px;
        line-height:40px;
        font-size:16px;
        color:var(--titleColor);
        margin:0;
        padding:0;
        overflow:hidden;
    }
    .blog-about .author .author-intro{
        width:100%;
        height:auto;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
        padding:0;
    }
    .comment-title{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:20px;
        color:var(--titleColor);
        font-weight:bold;
        background:var(--backgroundColor);
        margin:0px;
        padding:20px;
    }
    .comment-title small{
        font-size:12px;
        color:var(--darkTitleColor);
        font-weight:bold;
        margin:0 0 0 5px;
        padding:0;
    }
    .comment-list{
        width:100%;
        height:auto;
        border-radius:0;
    	background:var(--backgroundColor);
    	margin:0 0 5px;
    	padding:5px 20px 20px;
    }
    .noComment{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--titleColor);
        text-align:center;
        margin:20px 0;
    }
    .comment-list .comment-item{
        width:100%;
        height:auto;
        border:1px solid var(--borderColor);
        background:none;
    	margin:0 0 5px;
    	padding:20px 0;
    }
    .comment-list .comment-item p{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
    	padding:5px 20px;
    }
    .comment-list .comment-item p.reply-comment-row{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        border-top:1px solid var(--borderColor);
        border-bottom:1px solid var(--borderColor);
        margin:0;
    	padding:5px 20px 5px 50px;
    }
    .comment-list .comment-item p a.username{
        color:deeppink;
        font-weight:bold;
        display:inline-block;
        margin-right:5px;
    }
    .comment-list .comment-item p.reply-comment-row a.username{
        color:var(--blueColor);
    }
    .comment-list .comment-item p .datetime{
        font-size:12px;
    }
    .comment-list .comment-item .content{
        color:var(--titleColor);
    }
    .comment{
        width:100%;
        height:auto;
        margin:0 0 5px;
        padding:0 20px 20px;
        background:var(--backgroundColor);
        overflow:hidden;
    	display:block;
    }
    .comment-row{
        height:auto;
        margin:0 0 10px;
        padding:0;
    }
    .comment-row label{
        height:35px;
        line-height:35px;
        font-size:14px;
        color:var(--titleColor);
        margin:0;
        padding:0;
    }
    .comment-row .captcha{
        width:auto;
        height:30.5px;
        margin:0;
        padding:0;
    }
    .comment-row .captcha img{
        height:30.5px;
    }
    .comment-row small{
        font-size:12px;
        color:var(--lightColor);
        padding:0;
    }
    .comment-row input{
        font-size:14px;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
    }
    .comment-row textarea{
        font-size:14px;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
    }
    .commentUserInfo{
        width:100%;
        height:auto;
        margin-bottom:10px;
        position:relative;
    }
    input.commentInput{
        width:100%;
        height:35px;
        line-height:35px;
        font-size:14px;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
        padding:0 2%;
    }
    .commentUserInfo .captcha{
        width:auto;
        height:35px;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
    }
    .commentUserInfo .captcha img{
        width:auto;
        height:35px;
    }
    .commentTextarea{
        width:100%;
        height:auto;
        margin-bottom:10px;
    }
    .commentTextarea textarea{
        width:100%;
        height:90px;
        line-height:25px;
        font-size:14px;
        color:var(--lightColor);
        border:none;
        background:var(--deepColor);
        padding:0 2%;
    }
    .comment-btn{
        width:100%;
        height:auto;
        text-align:center;
        margin-top:20px;
    }
    .comment-btn button{
        font-size:14px;
    }
}
/* 中等屏幕（大于等于768px）布局容器的宽度为720px */
@media screen and (min-width:768px){
    .containner{
        width:720px;
    }
    .blog-detail-container{
        height:auto;
        margin:0 auto;
        padding:0 5px 0 0;
        overflow:hidden;
    }
}
/* 大屏幕（大于等于992px）布局容器的宽度为960px */
@media screen and (min-width:992px){
    .containner{
        width:960px;
    }
}
/* 超大屏幕（大于等于1200px）布局容器的宽度为1140px */
@media screen and (min-width:1200px){
    .containner{
        width:1140px;
    }
}