如何将移动优化的外部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文件中。