CSS @import 不适用于 Shopify

Question

目前正在构建 Shopify 主题，并且我正在使用 Gridset 进行网格布局。我的问题是，对于 IE 8/9，它需要使用一些 CSS @import，但它们似乎无法正常工作，因为网格仅在这些版本上中断。

对于标准网站，您只需执行以下操作

@import url("gridset-ie-a-spans1.css") only screen and (min-width:1025px);

我已尝试通过执行以下操作来适应 Shopify，但没有成功：

@import url("{{ 'gridset-ie-a-spans1.css' | asset_url }}") only screen and (min-width:1025px);

还有

@import url("{{ 'gridset-ie-a-spans1.css' | asset_url | stylesheet_tag }}") only screen and (min-width:1025px);

都没有用！

有谁知道如何成功地让@imports 工作，或经过验证的替代方案？

任何帮助将不胜感激！

Answer 1

Media queries 在 IE8 及以下版本中根本不支持。

对于 IE9，您应该可以在 HTML 中执行此操作：

<link rel="stylesheet" type="text/css" href="gridset-ie-a-spans1.css" media="screen and (min-width:1025px)" />

要添加对 IE8 的支持，您可以使用多种 JS 解决方案之一。例如，可以添加this library 以添加仅对 IE8 的媒体查询支持，代码如下：

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Respond 是另一个做同样事情的库。将该库添加到您的 HTML 的代码将是相同的：

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

如果您不喜欢基于 JS 的解决方案，您还应该考虑添加一个仅限 IE

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->