html - 我的媒体查询效果不佳，我不知道我做错了什么。它在前一段时间工作但现在不工作了

标签 html css media-queries

我的媒体查询效果不佳，我不知道自己做错了什么。它在前一段时间工作，但现在不工作了。我的目标是更大的屏幕尺寸 (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

最佳答案

我认为这与您的媒体查询 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;
  }
}

此外，您还留下了一些花括号和一些随机样式。还要正确检查每一行代码，在某些涉及括号的行中可能会出现一些错误。

关于html - 我的媒体查询效果不佳，我不知道我做错了什么。它在前一段时间工作但现在不工作了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51240954/

上一篇：css - child 得到 100% 的 parent 的 flex

下一篇：javascript - 减少 Bootstrap 4 Card Z-index 小于表 thead

相关文章：

javascript - 使 ul 适合输入的大小

javascript - Jquery拖放图像但原始/源图像丢失

html - 将两个图像与文本对齐

css - @media 查询未按预期工作

html - Mobile Emulator 根据媒体查询中指定的设备宽度选择了错误的样式表...为什么？

html - 带有 Twitter Bootstrap 的三列流体布局 - clearfixes 搞砸了

javascript - 如何防止表单提交时刷新时重新提交表单

javascript - 如何使 Accordion 滑动下一步

css - 我如何获得 JavaFX 8 日期选择器 CSS 属性

html - @media 上的文本输入没有改变

©2024 IT工具网  联系我们