媒体查询和引导模式？

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 将针对屏幕宽度为 480 像素或更大的所有设备。对于你想要的小型设备max-width：

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