Question

我正在创建自己的简单网站，并且必须为横向和纵向设置自定义值。但是我的代码无法正常工作。你能帮我吗？

@media only screen and (min-device-width : 360px) and (max-device-width : 769px)  {
  .head-go {
        background-image: url();
        margin-bottom:  8px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 7px;
        z-index: 4996;
   }

  .footer-go {
        height: 3px;
        background-image: url();
        background-size: 100%;
        background-repeat: no-repeat;
        margin-top:  3px;
        z-index: 4995;
   }

  @media only screen and (orientation: landscape) {
      .latest-news-form {
        position: fixed;
        width: 45% !important;
        height: 60% !important;
        color: blue;
        margin:  auto;
        border: 1px solid #9c9c9c;
        padding:  2px;
        text-align:  center;
        background-color:  #fff;
        z-index: 4997;
      }
 }

@media only screen and (orientation: portrait) {
      .latest-news-form {
        position: fixed;
        width: 65% !important;
        margin-right: 270px !important;
        color: red;
        margin:  auto;
        border: 1px solid #9c9c9c;
        padding:  2px;
        text-align:  center;
        background-color:  #fff;
        z-index: 4997;
    }
  }
}

我不知道为什么不起作用。我希望你能帮助我！谢谢。

Answer 1

尝试按@media only screen顺序使用没有仅个字的媒体规则。

@media screen and (min-device-width : 360px) and (max-device-width : 769px)  {
  .head-go {
        background-image: url();
        margin-bottom:  8px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 7px;
        z-index: 4996;
   }

  .footer-go {
        height: 3px;
        background-image: url();
        background-size: 100%;
        background-repeat: no-repeat;
        margin-top:  3px;
        z-index: 4995;
   }

  @media screen and (orientation: landscape) {
      .latest-news-form {
        position: fixed;
        width: 45% !important;
        height: 60% !important;
        color: blue;
        margin:  auto;
        border: 1px solid #9c9c9c;
        padding:  2px;
        text-align:  center;
        background-color:  #fff;
        z-index: 4997;
      }
 }

@media screen and (orientation: portrait) {
      .latest-news-form {
        position: fixed;
        width: 65% !important;
        margin-right: 270px !important;
        color: red;
        margin:  auto;
        border: 1px solid #9c9c9c;
        padding:  2px;
        text-align:  center;
        background-color:  #fff;
        z-index: 4997;
    }
  }
}

CSS方向（横向|纵向）无法正常工作

1 个答案: