html - 媒体查询对每个浏览器的行为不同

Question

我在一个简单的机构网站上工作，除了媒体查询外，一切正常。我是这项技术的新手，所以我真的不知道发生了什么。

当我在 iPad 等屏幕和更小的屏幕上打开折叠的 Bootstrap 菜单时出现我的问题，这取决于浏览器。

它在 Firefox 上运行良好，但在 Chrome 和 Safari 上有一些问题，所以它让我相信我的代码可以正常工作，但我遗漏了浏览器兼容性的一些重要方面。

我希望导航栏菜单在屏幕为中等尺寸时以灰色背景打开(仅适用于 Firefox)，在移动设备上以黑色背景打开(Safari 有一个错误，会打开整个菜单并将其减少一半)。

这是网站:flowersforpeaceproject.com

代码如下:

body {
    margin: 0;
    padding: 0;
    font-family: 'Merriweather Sans', sans-serif;
}

/*NAVBAR*/

.navbar{
    border: 0;
    position: absolute;
    top: 0;
    z-index: 10;
    width: 100%;
}

.navbar .nav > li > a{
    color: #1E73BE;
}

.navbar-default{
    background-color: transparent;
}

nav .navbar-brand img{
    height: 220px;
    margin-right: 20px;
}

/*MEDIA QUERIES*/
@media screen and (max-width: 1000px) {
  .navbar-header {
      float: none;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }

  /*MY CODE*/
  #bs-example-navbar-collapse-1 .navbar-right{
      background-color: rgb(50,50,50, 0.9);
      border-radius: 10px;
      max-width: 180px;
  }
}


@media screen and (max-width: 480px){
    nav .navbar-brand img{
        height: 120px;
        margin-right: 20px;
    }

    #bs-example-navbar-collapse-1 .navbar-right{
        border: 0;
        position: absolute;
        top: 10;
        left: 0;
        z-index: 10;
        width: 700px;
        margin-left: 20px;
        background-color: black;
        border-radius: 10px;

    }

}
/*END MEDIA*/

...

Answer 1

有一个很好的资源可用于学习和使用媒体查询。 here

• 由于这是一个基于浏览器的媒体查询错误，您可以通过为每个屏幕分辨率指定不同的 CSS 轻松解决。 这是一个生成媒体查询的好工具。 Open Site.

在您的代码中，您可以生成 css，例如针对不同的屏幕分辨率。

@media screen and (max-width: 400px) {
    border: 0;
            position: absolute;
            top: 10;
            left: 0;
            z-index: 10;
            width: 700px;
            margin-left: 20px;
            background-color: black;
            border-radius: 10px;
}

@media screen and (min-width: 401px) and (max-width: 720px) {
    border: 0;
            position: absolute;
            top: 10;
            left: 0;
            z-index: 10;
            width: 700px;
            margin-left: 20px;
            background-color: black;
            border-radius: 10px;
}

@media screen and (min-width: 721px) and (max-width: 1280px) {
    border: 0;
            position: absolute;
            top: 10;
            left: 0;
            z-index: 10;
            width: 700px;
            margin-left: 20px;
            background-color: black;
            border-radius: 10px;
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    border: 0;
            position: absolute;
            top: 10;
            left: 0;
            z-index: 10;
            width: 700px;
            margin-left: 20px;
            background-color: black;
            border-radius: 10px;
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    border: 0;
            position: absolute;
            top: 10;
            left: 0;
            z-index: 10;
            width: 700px;
            margin-left: 20px;
            background-color: black;
            border-radius: 10px;
}

@media screen and (min-width: 1921px) {
    border: 0;
            position: absolute;
            top: 10;
            left: 0;
            z-index: 10;
            width: 700px;
            margin-left: 20px;
            background-color: black;
            border-radius: 10px;
}