媒体查询和引导模态？

Question

我正在创建一个模态，我希望它能够在所有设备上看起来不错，但目前我正在尝试下面的媒体查询，它在所有设备上都有变化（MBP，iPhone 6,24英寸桌面）

.modal-wide{
  width: 60%;
  max-height: 90vh;
  /*height: auto;*/
}

/* For mobile phones: */
@media only screen and (min-width: 480px) {
  .modal-body {
    position: relative;
      max-height: 200px; 
      overflow-y: auto;
  } 
  .modal-wide {
    width: 95%;
  }
}

我的想法是它只会改变我的iPhone？但事实并非如此？我做错了什么吗？这是.modal-wide选择器样式搞砸了。

Answer 1

你似乎有错误的方法。 min-width: 480px将定位屏幕宽度为480px或更高的所有设备。对于您想要的小型设备max-width：

@media only screen and (max-width: 480px) {
    ...
}