如何将移动优化的外部CSS添加到Shopify网站

Question

I want to add an external CSS doc for my mobile optimisation but am unsure how to do this. 我想为我的移动优化添加一个外部CSS文档，但是不确定如何执行此操作。

I understand that to add a file to the Shopify theme index you must do something like: 我了解要将文件添加到Shopify主题索引，您必须执行以下操作：

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

in the header. 在标题中。 But I am unsure of how to wrap this in a @media statement, eg: 但是我不确定如何将其包装在@media语句中，例如：

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

Adding the above just prints @media screen and (device-aspect-ratio: 40/71) {} 添加以上内容仅会打印@media screen and (device-aspect-ratio: 40/71) {}

Does anyone know the correct way of using @media with Shopify? 有谁知道在Shopify上使用@media的正确方法？

Answer 1

[Update] This is a much better way, omitting the sytlesheet_tag function completely: [更新]这是一种更好的方法，完全省略了sytlesheet_tag函数：

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

Old: 旧：

Include the asset normally: 通常包括资产：

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

And then make sure you put your media query inside you mobile.css file. 然后确保将媒体查询放入 mobile.css文件中。