Question

我的媒体查询无法正常运行，我不知道自己做错了什么。它曾在一段时间前有效，但现在不再有效。我的目标是更大的屏幕尺寸（1920 x 1080），（1680 x 1080），但是有些屏幕在某些页面上起作用，而在其他页面上却没有。我对做什么感到困惑。它只为@media渲染（最小宽度：768px），我不知道该怎么办。这是代码。

@media only screen and (min-width: 1600px) {
    /* for about page */
  .team-back1 {
    height: 690px;
    background-position: 10% center;
  }

  .team-right-content {
    margin-top: 2%;
  }  

    /* for service page */
  .team-back {
    height: 690px;
    background-position: center 20%;
  }

  .col-sm-7 {
    width: 58.333333%;
    margin-top: -1%;
  }

  div.bhoechie-tab-container {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 69%;
  }


    /* for home page */

  #home-2 .container-fluid {
    height: 690px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 650px;
    margin-top: 3.5%;
  }   

    /*for project page */
  .pc {
    height: 550px;
    float: right;
  }

  .team-back3 {
    height: 690px;
    background-position: center 20%;
  }

    /* width: 73%; */
  margin-top: 0%;
} 

    /* for contact page */
    /*#contact-us .container-fluid {
    height: 760px;}       

    .contct-lft-bck {
    height: 580px !important;}

    #map { 
    height: 580px;}

    .contct-middle-back { 
    height: 580px;}

    .contct-right-back {
    height: 580px; }*/

    /*.row {
    margin-top: 3.5%; }*/

    }

@media only screen and (min-width: 1680px) {
    /* for about page */
  .team-right-content p {
    font-size: 16px;
  }

  .team-back1 {
    height: 798px;
    background-position: 10% center;
  }

  .team-right-content {
    margin-top: 3%;
  }

    /* for service page */
  .team-back {
    height: 798px;
    background-position: center -35%;
  }

  .col-sm-7 {
    width: 60.333333%;
    margin-top: 2%;
  }

  div.bhoechie-tab-container {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 76%;
  }


    /* for home page */

  #home-2 .container-fluid {
    height: 798px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 680px;
    margin-top: 3.5%;
  }   

    /*for project page */
  .pc {
    height: 580px;
    float: right;
  }

  .team-back3 {
    height: 798px;
    background-position: center -35%;
  }


    /* for contact page */
  #contact-us .container-fluid {
    height: 798px;
  }

  .contct-lft-bck {
    height: 680px !important;
  }

  #map {
    height: 680px;
  }

  .contct-middle-back {
    height: 680px;
  }

  .contct-right-back {
    height: 680px;
  }

  .row {
    margin-top: 3.5%;
  }
}

@media only screen and (min-width: 1800px) {
  .team-right-content p {
    font-size: 16px;
  }

    /* for projects*/
  .team-back3 {
    height: 760px;
    background-position: 30% center;
  }

  .project-content {
    height: 512px;
  }

  .bret {
    width: 970px;
    margin-left: 40px;
  }

  .project-height {
    height: 512px;
    margin-top: -4%;
  }


    /* for about page */
  .team-back1 {
    height: 760px;
    background-position: 10% 20%;
  }

  .team-right-content {
    margin-top: -4%;
  } 

    /* for service page */
  .team-back {
    height: 760px;
    /* background-position: center -40%;   */
    background-position: 5% -10%;
  }

  .col-sm-7 {
    width: 60.333333%;
    margin-top: 4%;
  }

  div.bhoechie-tab-container {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 89%;
  }


    /* for home page */

  #home-2 .container-fluid {
    height: 760px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 700px;
    margin-top: 3.5%;
  }   

    /*for project page */
  .pc {
    /* height: 600px; */
    overflow-y: auto;
    /* float: right;}  */
    /* for contact page */
    #contact-us .container-fluid {
    height: 760px;
  }

  #contact-us .container-fluid {
    height: 760px;
  }

  .contct-lft-bck {
    height: 685px !important;
  }

  #map {
    height: 685px;
  }

  .contct-right-back {
    height: 685px;
  }

  .row {
    margin-top: 3.5%;
  }

  .contt {
    height: 760px!important;
  }
}

    }

@media only screen and (max-width:1140px) {
  #blog-1 .col-sm-4 {
    width: 50%;
  }
}

@media only screen and (max-width:1100px) {
  .hidden-xs {
    display: none!important;
  }
}

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

@media only screen and (max-width:992px) {
  .top-cart {
    display: none;
  }

  .nav-menu ul {
    margin-right: 50px;
  }

  #team .col-sm-offset-5 {
    margin-left: 0%;
  }

  #team .col-sm-7 {
    width: 100%;
  }

  .single-left {
    width: 100%!important;
  }

  .single-left .reply-form-left-col {
    width: 100%!important;
  }

  .single-right {
    width: 100%;
  }

  .cell-2 {
    width: 50%;
  }

  .cell-3 {
    width: 50%;
  }
}

@media only screen and (max-width:840px) {
  .footer-left {
    width: 100%;
    clear: both;
  }

  .footer-left p {
    text-align: center;
  }

  .footer-right {
    width: 100%;
    text-align: center;
  }

  #blog-1 .col-sm-4 {
    width: 80%;
  }

  #blog-1 .row {
    margin: 0 auto;
  }

  .left-15 {
    padding-left: 15px;
  }

  #contact-us .col-sm-4 {
    width: 100%;
  }
}

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

  .bou {
    height: 620px;
  }

  .nav-menu {
    display: none;
  }

  .morphsearch {
    display: none;
  }

  .mobile-drop {
    display: block;
  }

  .extra {
    top: 18px!important;
  }

  #blog-1 .col-sm-4 {
    width: 100%;
  }

  #blog-1 .row {
    margin: 0 auto;
  }

  #blog-single-1 .single-post-detail-image img {
    min-width: 100%;
  }

  #blog-single-1 .blog-item {
    padding: 15px;
  }

  .home-bottom {
    font-size: 8px!important;
    padding: 7px 12px!important;
  }

  .btn-group-lg>.btn,
    .btn-lg {
    line-height: 1.3333333;
    margin-right: -80px;
    margin-top: 25px;
    float: right;
  }

  .btn-group-md>.btn,
    .btn-md {
    line-height: 1.3333333;
    margin-right: -30px;
    margin-top: 25px;
    float: right;
    display: none;
  }

  #team .container-fluid {
    padding: 50px 10px 10px 10px;
  }

  .team-back {
    height: 100% !important;
  }

  .team-back1 {
    height: 100% !important;
  }

  .abouty {
    padding: 0px;
    margin-right: 0px;
  }

  .team-right-content {
    padding: 20px 25px 20px 10px;
  }

  .project-content {
    padding: 20px;
  }

  .pc {
    padding-left: 70px;
  }

  .serve {
    display: none !important;
  }
    /*.meetus {
        visibility: hidden;
    }*/
  .bighead {
    display: none;
  }

  .bighead2 {
    display: none;
  }

  .righty {
    float: left;
  }
}

@media only screen and (max-width:640px) {
  .home-bottom {
    font-size: 5px!important;
    padding: 7px 12px!important;
  }

  .team-right-content .member-content {
    text-align: center;
    margin: auto;
    margin-bottom: 25px;
  }

  .team-right-content .member-content img {
    text-align: center;
    margin: auto;
  }

  .footer-left p {
    margin-left: 0px!important;
  }
}

@media only screen and (max-width:580px) {
  .cell-2 {
    width: 100%;
  }

  .home-2-icon {
    padding-top: 40px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 250px;
  }

  .cell-3 {
    width: 100%;
  }

  .home3-content-container {
    top: 40px;
  }

  [class*="cell-3"],
    .masonry .post-item {
    min-height: 250px;
  }
}

@media only screen and (max-width:480px) {
  .about2-left {
    padding: 21px 20px;
  }

  .about-two-link {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width:420px) {
  .left-post-content {
    width: 80%;
    padding-bottom: 20px;
  }

  .left-post-back {
    margin-bottom: 20px;
  }

  .right-post-content {
    width: 80%;
    padding-bottom: 20px;
  }

  .right-post-image {
    float: left;
  }

  .right-post-back {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width:220px) and (max-width:480px) {
}

@media only screen and (min-width:767px) {
  .mobile-modal {
    display: none;
  }

  .mob-head {
    display: none;
  }

  .mob-subhead {
    display: none;
  }
}

@media (min-width: 768px) {
  .col-sm-offset-5 {
    margin-left: 33.666667%;
  }
    /*.col-sm-7 {
        width: 67.333333%;
    } */
  .bouts {
    width: 58%;
  }

  .bret {
    width: 750px;
  }

  .pc {
    height: 490px;
  }

  .row {
    margin-top: 0%;
  }

  .team-back1 {
    height: 548px;
  }

  .team-back {
    height: 548px;
  }

  .contct-lft-bck {
    height: 548px!important;
  }

  .contct-middle-back {
    height: 548px;
  }

  .contct-right-back {
    height: 548px;
  }

  #contact-us .container-fluid {
    height: 548px;
  }
}

@media (min-width: 1200px) {
  .cmine {
    width: 1024px;
  }
}

可能我没有按照要求放置媒体查询代码。我只需要一个见识。这是实际页面CLICK TO OPEN

的网站链接

Answer 1

您在关闭查询时遇到了一些问题，还有一些标签...

某些查询是“双封闭”查询，在}和@media only screen and (min-width: 1680px)查询之前还有一个@media only screen and (max-width:1140px)。

@media only screen and (min-width: 1800px)中.pc内的中学未关闭。

一个体面的验证者甚至是编辑者都应该注意到这一点。

Answer 2

我认为这与媒体查询CSS的顺序有关。所以为什么不尝试像下面这样订购它们。因此，您的代码也变得更加用户友好：

@media only screen and (max-width:420px) {
  .left-post-content {
    width: 80%;
    padding-bottom: 20px;
  }

  .left-post-back {
    margin-bottom: 20px;
  }

  .right-post-content {
    width: 80%;
    padding-bottom: 20px;
  }

  .right-post-image {
    float: left;
  }

  .right-post-back {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width:480px) {
  .about2-left {
    padding: 21px 20px;
  }

  .about-two-link {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width:580px) {
  .cell-2 {
    width: 100%;
  }

  .home-2-icon {
    padding-top: 40px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 250px;
  }

  .cell-3 {
    width: 100%;
  }

  .home3-content-container {
    top: 40px;
  }

  [class*="cell-3"],
    .masonry .post-item {
    min-height: 250px;
  }
}

@media only screen and (max-width:640px) {
  .home-bottom {
    font-size: 5px!important;
    padding: 7px 12px!important;
  }

  .team-right-content .member-content {
    text-align: center;
    margin: auto;
    margin-bottom: 25px;
  }

  .team-right-content .member-content img {
    text-align: center;
    margin: auto;
  }

  .footer-left p {
    margin-left: 0px!important;
  }
}

@media only screen and (max-width:767px) {

  .bou {
    height: 620px;
  }

  .nav-menu {
    display: none;
  }

  .morphsearch {
    display: none;
  }

  .mobile-drop {
    display: block;
  }

  .extra {
    top: 18px!important;
  }

  #blog-1 .col-sm-4 {
    width: 100%;
  }

  #blog-1 .row {
    margin: 0 auto;
  }

  #blog-single-1 .single-post-detail-image img {
    min-width: 100%;
  }

  #blog-single-1 .blog-item {
    padding: 15px;
  }

  .home-bottom {
    font-size: 8px!important;
    padding: 7px 12px!important;
  }

  .btn-group-lg>.btn,
    .btn-lg {
    line-height: 1.3333333;
    margin-right: -80px;
    margin-top: 25px;
    float: right;
  }

  .btn-group-md>.btn,
    .btn-md {
    line-height: 1.3333333;
    margin-right: -30px;
    margin-top: 25px;
    float: right;
    display: none;
  }

  #team .container-fluid {
    padding: 50px 10px 10px 10px;
  }

  .team-back {
    height: 100% !important;
  }

  .team-back1 {
    height: 100% !important;
  }

  .abouty {
    padding: 0px;
    margin-right: 0px;
  }

  .team-right-content {
    padding: 20px 25px 20px 10px;
  }

  .project-content {
    padding: 20px;
  }

  .pc {
    padding-left: 70px;
  }

  .serve {
    display: none !important;
  }
    /*.meetus {
        visibility: hidden;
    }*/
  .bighead {
    display: none;
  }

  .bighead2 {
    display: none;
  }

  .righty {
    float: left;
  }
}

@media only screen and (min-width:767px) {
  .mobile-modal {
    display: none;
  }

  .mob-head {
    display: none;
  }

  .mob-subhead {
    display: none;
  }
}

@media (min-width: 768px) {
  .col-sm-offset-5 {
    margin-left: 33.666667%;
  }
    /*.col-sm-7 {
        width: 67.333333%;
    } */
  .bouts {
    width: 58%;
  }

  .bret {
    width: 750px;
  }

  .pc {
    height: 490px;
  }

  .row {
    margin-top: 0%;
  }

  .team-back1 {
    height: 548px;
  }

  .team-back {
    height: 548px;
  }

  .contct-lft-bck {
    height: 548px!important;
  }

  .contct-middle-back {
    height: 548px;
  }

  .contct-right-back {
    height: 548px;
  }

  #contact-us .container-fluid {
    height: 548px;
  }
}

@media only screen and (max-width:840px) {
  .footer-left {
    width: 100%;
    clear: both;
  }

  .footer-left p {
    text-align: center;
  }

  .footer-right {
    width: 100%;
    text-align: center;
  }

  #blog-1 .col-sm-4 {
    width: 80%;
  }

  #blog-1 .row {
    margin: 0 auto;
  }

  .left-15 {
    padding-left: 15px;
  }

  #contact-us .col-sm-4 {
    width: 100%;
  }
}

@media only screen and (max-width:992px) {
  .top-cart {
    display: none;
  }

  .nav-menu ul {
    margin-right: 50px;
  }

  #team .col-sm-offset-5 {
    margin-left: 0%;
  }

  #team .col-sm-7 {
    width: 100%;
  }

  .single-left {
    width: 100%!important;
  }

  .single-left .reply-form-left-col {
    width: 100%!important;
  }

  .single-right {
    width: 100%;
  }

  .cell-2 {
    width: 50%;
  }

  .cell-3 {
    width: 50%;
  }
}

@media only screen and (max-width:1140px) {
  #blog-1 .col-sm-4 {
    width: 50%;
  }
}

@media only screen and (max-width:1100px) {
  .hidden-xs {
    display: none!important;
  }
}

@media (min-width: 1200px) {
  .cmine {
    width: 1024px;
  }
}




@media only screen and (min-width: 1600px) {
    /* for about page */
  .team-back1 {
    height: 690px;
    background-position: 10% center;
  }

  .team-right-content {
    margin-top: 2%;
  }  

    /* for service page */
  .team-back {
    height: 690px;
    background-position: center 20%;
  }

  .col-sm-7 {
    width: 58.333333%;
    margin-top: -1%;
  }

  div.bhoechie-tab-container {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 69%;
  }


    /* for home page */

  #home-2 .container-fluid {
    height: 690px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 650px;
    margin-top: 3.5%;
  }   

    /*for project page */
  .pc {
    height: 550px;
    float: right;
  }

  .team-back3 {
    height: 690px;
    background-position: center 20%;
  }
} 

@media only screen and (min-width: 1680px) {
    /* for about page */
  .team-right-content p {
    font-size: 16px;
  }

  .team-back1 {
    height: 798px;
    background-position: 10% center;
  }

  .team-right-content {
    margin-top: 3%;
  }

    /* for service page */
  .team-back {
    height: 798px;
    background-position: center -35%;
  }

  .col-sm-7 {
    width: 60.333333%;
    margin-top: 2%;
  }

  div.bhoechie-tab-container {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 76%;
  }


    /* for home page */

  #home-2 .container-fluid {
    height: 798px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 680px;
    margin-top: 3.5%;
  }   

    /*for project page */
  .pc {
    height: 580px;
    float: right;
  }

  .team-back3 {
    height: 798px;
    background-position: center -35%;
  }


    /* for contact page */
  #contact-us .container-fluid {
    height: 798px;
  }

  .contct-lft-bck {
    height: 680px !important;
  }

  #map {
    height: 680px;
  }

  .contct-middle-back {
    height: 680px;
  }

  .contct-right-back {
    height: 680px;
  }

  .row {
    margin-top: 3.5%;
  }
}

@media only screen and (min-width: 1800px) {
  .team-right-content p {
    font-size: 16px;
  }

    /* for projects*/
  .team-back3 {
    height: 760px;
    background-position: 30% center;
  }

  .project-content {
    height: 512px;
  }

  .bret {
    width: 970px;
    margin-left: 40px;
  }

  .project-height {
    height: 512px;
    margin-top: -4%;
  }


    /* for about page */
  .team-back1 {
    height: 760px;
    background-position: 10% 20%;
  }

  .team-right-content {
    margin-top: -4%;
  } 

    /* for service page */
  .team-back {
    height: 760px;
    /* background-position: center -40%;   */
    background-position: 5% -10%;
  }

  .col-sm-7 {
    width: 60.333333%;
    margin-top: 4%;
  }

  div.bhoechie-tab-container {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 89%;
  }


    /* for home page */

  #home-2 .container-fluid {
    height: 760px;
  }

  [class*="cell-2"],
    .masonry .post-item {
    min-height: 700px;
    margin-top: 3.5%;
  }   

    /*for project page */
  .pc {
    /* height: 600px; */
    overflow-y: auto;
    /* float: right;}  */
    /* for contact page */
    #contact-us .container-fluid {
    height: 760px;
  }

  #contact-us .container-fluid {
    height: 760px;
  }

  .contct-lft-bck {
    height: 685px !important;
  }

  #map {
    height: 685px;
  }

  .contct-right-back {
    height: 685px;
  }

  .row {
    margin-top: 3.5%;
  }

  .contt {
    height: 760px!important;
  }
}

此外，您还有一些大括号和一些随机样式。另外，请正确检查每一行代码，其中某些包含括号的行中可能会有错误。

我的媒体查询无法正常运行，我不知道自己做错了什么。它在一段时间前有效，但现在不再有效

2 个答案: