Question

我在这个网站上工作http://josedelavega.nowcommu.myhostpoint.ch （使用此Wordpress主题制作http://themeforest.net/item/orquidea-responsive-wordpress-theme/full_screen_preview/5120180）

在台式机和平板电脑上，一切都很好，但在智能手机上却没有（在我的情况下是Samunsg Galaxy S6）。内容看起来像“被阻止”或“隐藏”。如果您首先在桌面上查看而不是在智能手机上查看，则可以看到差异。

媒体查询有什么问题吗？

@media (min-width: 1200px) {

}
@media (min-width: 980px) {

}
@media (max-width: 1000px) {
  .cs-style-4 figcaption .descrtext {
    display: none!important;
  }
  nav#topmenu {
    display: none;
  }
  nav#mobilenav {
    display: block;
  }
  .serviceslist,
  .teamlist,
  .plicetable {
    margin-right: 15px;
  }
  .singleblog .textblock p {
    margin-right: 15px;
    margin-left: 15px;
  }
  .singleblog .slidergallery .sliderarrows .ltar {
    margin-left: 15px;
  }
  .singleblog .slidergallery .sliderarrows .rgshare {
    margin-right: 15px;
  }
  .leftpart {
    margin-left: 15px;
    width: 48%;
  }
  .rightpart {
    margin-right: 15px;
    width: 48%;
  }
}
@media (max-width: 980px) {
  .serviceslist .mobiledesc {
    display: block;
  }
  .no-touch .cs-style-4 figure:hover img,
  .cs-style-4 figure.cs-hover img {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .no-touch .cs-style-4 figure:hover figcaption,
  .cs-style-4 figure.cs-hover figcaption {
    display: none;
  }
}
@media (max-width: 960px) {

}
@media (max-width: 780px) {
  .blogarchive article.post {
    margin-right: 5px;
  }
  .gallerypage .galleryitems .galitem .imagegally .mask2 .gallydate {
    display: none;
  }
  .contacttop .leftpart {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }
  .contacttop .rightpart {
    width: 100%;
    float: none;
  }
  .abouttwotop .leftpart {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }
  .abouttwotop .rightpart {
    width: 100%;
    float: none;
  }
  .gallerypage .galleryitems .galitem,
  .gallerypage .gallpbd .galitem {
    width: 50%;
  }
  .singleblog .slidergallery .sliderbox {
    height: 500px;
  }
  .singleblog .slidergallery .sliderbox img {
    width: auto;
    max-height: 500px;
  }
}
@media (max-width: 640px) {
  .rightsidebar,
  .leftsidebar {
    display: none;
  }
  .rightsidebaron,
  .leftsidebaron {
    margin-right: 0;
    margin-left: 0;
  }
  .wrapper .subtitle {
    line-height: 26px;
  }
  /* Force table to not be like tables anymore */
  #no-more-tables table,
  #no-more-tables thead,
  #no-more-tables tbody,
  #no-more-tables th,
  #no-more-tables td,
  #no-more-tables tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  #no-more-tables tr {
    height: auto;
  }
  #no-more-tables td {
    /* Behave  like a "row" */

    border: none;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    height: auto;
    padding-bottom: 20px;
    padding-top: 10px;
  }
  #no-more-tables td:before {
    /* Now like a table header */

    position: absolute;
    /* Top/left values mimic padding */

    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }
  /*
    Label the data
    */
  #no-more-tables td:before {
    content: attr(data-title);
  }
  .singleblog .slidergallery .sliderbox {
    height: 400px;
  }
  .singleblog .slidergallery .sliderbox img {
    width: auto;
    max-height: 400px;
  }
  .serviceslist .titleservice {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  header#top .logo {
    width: 280px;
    margin: 0 auto;
    margin-top: 130px;
  }
  header#top .headertext {
    width: 320px;
    margin: 0 auto;
    margin-top: 35px;
  }
  header#top a.gobot {
    margin: 0 auto;
    margin-top: 65px;
  }
  .teamlist li:nth-child(3n+3) {
    margin: 0 auto;
    margin-bottom: 40px!important;
  }
  .teamlist li {
    max-width: 295px;
    width: 100%;
    float: none;
    margin: 0 auto;
    margin-bottom: 40px!important;
  }
  footer#footer-main p.copy {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    float: none;
  }
  footer#footer-main div.socialprof {
    display: block;
    width: 100%;
    float: none;
    text-align: center;
  }
  .blogarchive article.post {
    width: 99%;
    float: none;
  }
  .commentform section.comments {
    width: 100%;
    float: none;
    margin-bottom: 30px;
  }
  .commentform section.respond {
    width: 92%;
    float: none;
  }
  .commentform section.comments .scrollbox {
    width: 100%;
  }
  .contactleft,
  .leftpart {
    width: 90%;
    margin-left: 15px;
    float: none;
    margin-bottom: 40px;
  }
  .contactright,
  .rightpart {
    width: 90%;
    float: none;
    margin-left: 15px;
  }
  .teamlist {
    width: 90%;
    overflow: hidden;
  }
  .wrapper {
    overflow: hidden;
  }
  nav#mobilenav select {
    width: 40%;
    font-size: 16px;
  }
  .gallerypage .galleryitems .galitem,
  .gallerypage .gallpbd .galitem {
    width: 100%;
  }
  .opentime .timelineopening li {
    float: none;
  }
  .opentime .timelineopening {
    text-align: center;
  }
  .singleblog .slidergallery .sliderbox {
    height: 300px;
  }
  .singleblog .slidergallery .sliderbox img {
    width: auto;
    max-height: 300px;
  }
  .serviceslist .titleservice {
    font-size: 18px;
  }
}
@media (max-width: 380px) {
  .singleblog .slidergallery .sliderbox {
    height: 200px;
  }
  .singleblog .slidergallery .sliderbox img {
    width: auto;
    max-height: 200px;
  }
  .serviceslist .titleservice {
    font-size: 16px;
  }
}

Answer 1

您必须检查响应式css文件查询，它将如下所示：

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

    //your code

}

检查一下。有时它会在主题选项中显示内容或隐藏它们。

网站内容在移动设备中不可见

1 个答案: