如何仅在特定页面上在移动设备上应用 CSS

Question

设置

我有一个带有粘性标题的 Shopify 网上商店。

仅在移动设备上我不想在产品页面上使用粘性标题。

---

当前 CSS

@media screen and (max-width: 768px) {    
      #shopify-section-header {
        position: inherit;
      }    
    }    

此 CSS 使标题对移动设备不具有粘性。

但是应用这样的流动代码，

{% if request.path contains '/products/' %}    
    @media screen and (max-width: 768px) {    
          #shopify-section-header {
            position: inherit;
          }    
        }    
{% endif %}         

什么都不做。

也没有，

.template-product { 
    @media screen and (max-width: 768px) {    
          #shopify-section-header {
            position: inherit;
          }    
        }    
}

按照here的建议。

---

问题

如何让页眉只在产品页面上不粘？

• 产品页面的 href 中有“/products/”

Answer 1

以下是这样做的。

@media screen and (max-width: 768px) {    
  body.template-product.loaded #shopify-section-header {
    position: inherit;
  }    
}