css - CSS 媒体查询在 HubSpot 网站上不起作用

Question

我正在尝试为使用 HubSpot CRM 构建的网站编写媒体查询，但我的查询没有做任何事情。我<meta name="viewport" content="width=device-width" />在脑海中添加了以下css：

@media all and (min-width: 1045px) {
   .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
     font-size: 0.9em;
   }  
}

这应该改变导航链接的字体大小，因此它们不会换行 - http://www.steelbridgeins.com/

请帮忙！-_-

Answer 1

您可以删除all设备属性，因为它是默认值，max-width如果您尝试将所有屏幕宽度定位在 1045 像素以下，我认为您的意思是使用它。

@media (max-width: 1045px) {
   .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
     font-size: 0.9em;
   }  
}

Answer 2

我相信这个问题是由于媒体查询的嵌套而发生的。目前，在 style.min.css 中，您正在使用：

@media (min-width: 481px) and (max-width: 767px) {
    /* some stylings */
    @media (max-width: 1045px) {
       .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
           font-size: 0.9em;
       }
    }  
}

如果您将所需的媒体查询移到其他媒体查询之外，如下所示，这应该可以解决您的问题。

@media (min-width: 481px) and (max-width: 767px) {
    /* some stylings */
}

@media (max-width: 1045px) {
   .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
       font-size: 0.9em;
   }
}