Question

我有这个代码，我试图找出它为什么不起作用。我已经阅读了几个非常相似的问题的答案，但我没有更明智。我们说的代码（max-width：480）是否适用于所有其他更大的媒体查询？我唯一能看到的是（最大宽度：1000）

@media screen and (max-width: 1000px) {
  .figur {
    display: none;
  }
  #about {
    width: 100%;
  }
  #map {
    width: 100%;
  }
}
@media screen and (max-width: 720px) {
  .parallax {
    background-image: url("../img/bamseLiten.jpeg");
  }
  .row .column {
    width: 100%;
    height: 200px;
  }  
}
@media all and (max-width: 480px) {
  #logo {
    display: block;
    width: 70%;
    align-self: center;
  }
  .menu li {
    display: block;
    width: 100%;
  }
}

Answer 1

你是如何测试的？

你需要确保你能够改变屏幕尺寸......铬提供了相当好的能力来检查。

您可能想尝试使用最小宽度和最大值？

@media only screen and (min-width: 768px) and (max-width: 990px) {
  .class {
     position: fixed;
     top: 0;
     height:40px;
  }
}

Answer 2

为了获得最大的设备可比性并采用您可以使用bootstrap 4+，例如媒体查询

// Small devices (landscape phones, 576px and up)
@media (max-width: 575px) { 
}

// Medium devices (tablets, 768px and up)
@media (max-width: 767px) { 

}

// Large devices (desktops, 992px and up)
@media (max-width: 991px) { 

}

// Extra large devices (large desktops, 1200px and up)
 @media (max-width: 1199px) { 

 }

对于超级手机，您可以使用min-width代替max-width，就像这样 -

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 

}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 

}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
}

// Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { 

 }

希望您使用此媒体查询之一获得更好的响应式布局。谢谢

如何使用多个媒体查询？

2 个答案: