Question

我正在构建一个简单的单一网页，我想在移动设备上隐藏div，如.rectangle-laptop所示，以便在移动设备上不显示任何内容，而背景图片则覆盖了移动设备上的整个屏幕，移动尺寸，但目前，媒体查询似乎无法正常工作，您能帮忙吗？

    .dot {
        height: 200px;
        width: 200px;
        background-color: lightgrey;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: -5rem;
        box-shadow: 0px 0px 5px #80808059;

  }


/* @media (min-width: 767px) {
  .rectangle-small {
    display: none !important;
  }
}*/
 .mobile-banner {
   background-size: cover;
  background-position: center;
  padding: 150px 0;
  background-image: url(https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg);
 }

     .rectangle-laptop {
          height: 200px;
          width: 850px;
          background-color: #555;
          display: inline-block;

        background-position: center;
      transition: all 0.5s ease;
             background-image: url(https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg);

      }


      .rectangle:hover{transform: scale(1.2);}
      .rectangle img {
        max-height: 200px;
        max-width: 850px;

      }

      .container {margin-top: 5%;}
      .rectangle-vertical-1 {
        height: 180px;
        width: 120px;
        background-color: lightgrey;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }
      .rectangle-vertical-2 {
        height: 180px;
        width: 120px;
        background-color: #a3a3a3;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }
      .rectangle-vertical-3 {
        height: 180px;
        width: 120px;
        background-color: #4d4c4c;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }

.rectangle-vertical-container {position: relative;margin-top: -9rem;"}

@media (max-width: 767px) {
  .rectangle-laptop{
    display: none !important;
    visibility: hidden;
  }
}

<div class="container">

        <div class="mobile-banner" style="position: relative;">

        <div style="text-align:center">
          <div  class="dot" ><h4>Melrose</h4><p>this sleek slab-styled kitchen allows you to mix and match both colour and texture.</p></div>
             <div>

                <div style="text-align:center">


                  <div class="rectangle-laptop" >
                   </div>
              <div class = "rectangle-vertical-container" >
                <span class="rectangle-vertical-1" ></span>
                <span class="rectangle-vertical-2"></span>
                <span class="rectangle-vertical-3"></span>
              </div>
            </div>
            </div>



            </div>

Answer 1

媒体查询应放在常规CSS规则之后，否则，您的情况将被常规规则（适用于所有大小）覆盖。

Answer 2

将媒体查询放置在常规CSS的底部，并将此媒体查询用于移动设备

final imgBase64Str = await networkImageToBase64('IMAGE_URL');
print(imgBase64Str);

Answer 3

它是@media only screen and (max-width: 767px){}，这行上有一个错字：

.rectangle-vertical-container {position: relative;margin-top: -9rem;"}

在结束}

之前删除双引号

媒体查询不起作用-在移动设备上隐藏div

3 个答案: