css - 如何向 Shopify 网站添加移动优化的外部 CSS

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 }}' />

旧:

正常包含 Assets :

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

然后确保将媒体查询放在 mobile.css 文件中。