html - 移动设备上的 CSS 不工作

Question

我有以下 CSS。出于某种原因，它一直有效到 @max-width:767 媒体查询。但是，它不起作用，但不适用于紧挨着它的分辨率，即@425。之后，它会再次开始处理低于它的决议。任何帮助识别此问题的帮助将不胜感激。

@media only screen and (max-width: 767px) { 


    header{height:auto;} body{padding-top:90px;}
    #div-header-submenu-rtl, #div-header-submenu {top:-5%; left:25%;}
    .text-center-767{text-align:center; padding-top:5px;}
    .search-div, .search-div-rtl{width:100%; margin-left:3px;} .search-div-rtl{padding-right:10px; margin-right:0px;}
    .txt-search{width: 85%;}
    .timeline-poster-name{ margin-top:auto;}
    .btn-comment-submit{width:20%; font-size:10px;}
    .affiliate-card-padd-3, .affiliate-card-padd-2,.affiliate-card-padd-4{ padding:15px;}
    .affiliate-card-padd-3-ar, .affiliate-card-padd-2-ar,.affiliate-card-padd-4-ar{ padding:15px;}

    .affiliate-frame, .select-affiliate, .affiliate-frame-store{ margin:0 auto;}

    .margin-left-50-767 {margin-left:50px;}

    .right-content-area {min-height:auto; padding-bottom:30px;}

    .left-grey-bar{height:auto;} .left-grey-fixed-bar, .fixed-filters-rtl{position:relative;} .left-grey-fixed-bar-rtl, .fixed-filters{position:relative; left:0; }
    .right-content-area, .left-content-area{min-height:auto;}

    .top-links-content-tabs, .top-links-content-tabs-highlight {font-size:12px;}    

    .displayInLinePhone{display:inline-block;}
    .posting-area, .posting-area-division{height:auto;}
    .comments-container-row {height:auto;}
    .lnkSectionHeading, .sectionHeading{font-size:12px;} .sectionHeading{ text-align:left; padding-top:20px;} 


    .padd-top-40{padding-top:20px;}  .padd-top-20{padding-top:10px;} .padd-top-15{padding-top:7px;}  

    .sm-icon-grey-bar{width:25px; height:25px; margin-top:5px; margin:0 auto;}


/*---------------------- BUSINESS PRODUCT -------------------------------------- */
#div-main-pic {background-color:#000;}  


/* ------------------ LOGIN PAGE ----------------------------------------------- */

    .login-headline {font-size:16px; font-weight:800;}

    .body-login, .body-login-rtl{background-color:#45c458; background-image:url('../images/login-bg-bhive.jpg'); background-size:auto; background-repeat:no-repeat; background-position:top; }

    .btn, .input-credentials, .txt-add-product{margin-top:15px;}
    .mob-background{background-color:rgba(255,255,255,0.7);}
    .footer{margin-top:5vh;}


/* ------------------ EXHIBITIONS ----------------------------------------------- */    
    .exhibitions-row{height:auto;}
    .text-center-767{text-align:center;} 
    .img-exhibit-sponsor{width:173px; height:100px; margin:0 auto;}

/* ------------------ Market Timeline ----------------------------------------------- */    





}


@media only screen and (max-width: 425px)
{
    .top-links-content-tabs, .top-links-content-tabs-highlight {font-size:10px;}
    .left-grey-fixed-bar{position:relative;} .left-grey-fixed-bar-rtl{position:relative; left:auto;}
    .sm-icon-grey-bar{width:25px; height:25px; margin-top:5px; margin:0 auto;}
    .font-size-12{font-size:10px;} 
    .font-size-14, .lnk-product-title{font-size:12px;}
    .text-center-425, .text-center-425-nopadd{text-align:center; padding-top:10px;} .text-center-425-nopadd{text-align:center;} 
    .padding-top-15-425{padding-top:15px;}
    .display-none-425 {display:none;}
    #div-header-submenu-rtl, #div-header-submenu {top:15%; left:22%;}

    /* ----------------------------- MARKET TIMELINE ----------------------------- */
    .timeline-posts-text, .timeline-location-text { text-align:center;} 
   .lnk-like-share-comment {font-size:10px;}
   .span-comment-like-share{text-align:center;}
   .img-product-timeline-frame{margin-top:40px; margin:0 auto;}
    .span-comment, .span-like, .span-share, .span-x{padding-left:2px; padding-right:2px; padding-top:10px; display:block; text-align:center;}

    .span-like, .span-share, .span-comment, .span-x{width:100%; }
   #share-update{border:1px solid #f1f1f1;
    .post-button{padding:0;}   
   .video-thumbnail-custom{width:171px; height:114px; margin:0 auto;}

    .sectionHeading-no-padd-425{padding:0;}
   .btn-overlay, .btn-overlay-rtl{ position:absolute; top:55%; left:58%; margin-top:0 !important;}
.btn-overlay-rtl{left:55%;}

/*------------------------------------ PRODUCT PAGE -------------------------------*/

    .product-header-1, .product-header-2, .product-header-3 {margin-top:30px;}

    .no-wrap{white-space:nowrap;overflow:hidden;} .no-wrap > div{ float:none;  display:inline-table;}

/*----------------------------------   EXHIBITIONS  -------------------------------- */

    .img-exhibit-sponsor{width:173px; height:100px; margin:0 auto;}




}


@media only screen and (max-width: 375px)
{


   .btn-overlay, .btn-overlay-rtl{ position:absolute; top:55%; left:58%;}
.btn-overlay-rtl{left:55%;} .video-thumbnail-custom{width:171px; height:114px; margin:0 auto;}
.row-thumbs{ top:56%;}

/* --------------------------- BUSINESS PRODUCT ---------------------------------------*/
.product-header-1 {font-size:14px;}
 .webkit-padd-left-40{ padding-left:15px;}


/*----------------------------------   EXHIBITIONS  -------------------------------- */
.img-exhibit-sponsor{width:173px; height:100px; margin:0 auto;}

}


@media only screen and (max-width: 325px)
{


   .btn-overlay, .btn-overlay-rtl{ position:absolute; top:59%; left:61%;}
.btn-overlay-rtl{left:22.5%;} .video-thumbnail-custom{width:171px; height:114px; margin:0 auto;}


}

Answer 1

可能是因为这里缺少右括号:

#share-update{border:1px solid #f1f1f1;

作为提示，我建议您始终验证您的 CSS:https://jigsaw.w3.org/css-validator/您可以上传您的 css 文件或将您的代码粘贴到那里。这样一来，缺少括号或打字错误之类的事情就不会令人头疼了:)

如果这对您有帮助，请告诉我。