Question

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

当我在iPad上打开折叠的引导程序菜单时出现我的问题，如屏幕和较小的，这取决于浏览器。

它适用于Firefox并且在Chrome和Safari方面存在一些问题，因此它让我相信我的代码正常运行，但我遗漏了浏览器兼容性的一些重要方面。

当屏幕中等大小（仅适用于Firefox）和黑色移动时，我希望导航栏菜单以灰色背景打开（Safari有一个错误打开整个菜单，然后将它减半）。

以下是代码：

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;
}

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

1 个答案:

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