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，因为它是默认设置，如果您尝试将所有屏幕宽度定位到1045px以下，我认为您的意思是使用max-width。

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

CSS Media查询无法在HubSpot站点上运行

2 个答案: