CSS 媒体查询在 HubSpot 网站上不起作用答案

【问题标题】：CSS Media queries not working on HubSpot siteCSS 媒体查询在 HubSpot 网站上不起作用
【发布时间】：2016-03-31 19:51:44
【问题描述】：

我正在尝试为使用 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/

请帮忙！ -_-

【问题讨论】：

标签： css media-queries hubspot

【解决方案1】：

您可以删除设备属性的all，因为它是默认值，我认为您的意思是使用max-width，而不是尝试将所有屏幕宽度设置为低于 1045 像素。

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

【讨论】：

【解决方案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;
   }
}

【讨论】：