如何將移動優化的外部CSS添加到Shopify網站

Question

我想為我的移動優化添加一個外部CSS文檔，但是不確定如何執行此操作。

我了解要將文件添加到Shopify主題索引，您必須執行以下操作：

{{ 'style.css' | asset_url | stylesheet_tag }}

在標題中。 但是我不確定如何將其包裝在@media語句中，例如：

  @media screen and (device-aspect-ratio: 40/71) {
  {{ 'mobile.css' | asset_url | stylesheet_tag }}
  }

添加以上內容僅會打印@media screen and (device-aspect-ratio: 40/71) {}

有誰知道在Shopify上使用@media的正確方法？

Answer 1

[更新]這是一種更好的方法，完全省略了sytlesheet_tag函數：

<link rel='stylesheet' media='screen and (device-aspect-ratio: 40/71)' href='{{ 'mobile.css' | asset_url }}' />

舊：

通常包括資產：

{{ 'mobile.css' | asset_url | stylesheet_tag }}

然后確保將媒體查詢放入 mobile.css文件中。