Question

我正在网站上工作，我正在尝试使用媒体查询来使我的网站同时适用于移动设备和桌面设备。我的桌面网站有一个浮动菜单栏，我希望这个菜单栏对于移动网站来说是相对的。

所以在我的CSS文件中我有这些行：

    /*For desktop*/
    nav#menubar {
      position: fixed;
      top: 0px;
    }

    /*For iPhone 5 */
    @media screen and (max-width: 768px){
      nav#menubar {
        position: relative;
        top: auto;
      }
    }

当我运行此菜单栏时，桌面页面和移动页面都是相对的。但是，当我注释掉For iPhone 5媒体查询时，菜单栏会按预期固定在移动设备和桌面设备上。有谁知道为什么媒体查询适用于桌面和移动网站？

非常感谢任何帮助。

Answer 1

可以肯定的是，您在HTML中添加了<meta name="viewport" content="...">标记吗？ https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

媒体查询似乎不起作用

1 个答案: