试图在 CSS 中编写关于 Turbo 主题/Shopify 的媒体查询但它不起作用？答案

【问题标题】：Trying to write a media query on Turbo theme / Shopify in CSS and its not working?试图在 CSS 中编写关于 Turbo 主题/Shopify 的媒体查询但它不起作用？
【发布时间】：2021-08-05 03:21:02
【问题描述】：

这里的代码非常新，但试图在新网站上整理一些图像，但似乎无法让媒体查询正常工作。

我正在使用沙盒外的 Turbo 主题，它允许您在元素中输入自定义 CSS。

@media only screen and (min-device-width : 768px) {
    .OVDGF-logos { width: 10%; }
}

我只是随机使用 10% 来查看是否发生了变化，但它没有任何区别。

该媒体查询是否正确编写？这是元素的图片：

【问题讨论】：

尝试简单的min-width 而不是min-device-width？
感谢您的回复！ :) 我试过了，不幸的是它没有用。
如果你想为移动设备添加CSS，只使用max-width而不是min-width，min-width就像起点和max-width终点。

标签： css shopify

【解决方案1】：

您需要创建一个单独的 CSS 文件并将其包含在“theme.liquid”文件或相应的模板中。

@media only screen and (max-width:768px) {
  .OVDGF-logos{
    width: 50% !important;
  }
 }

根据他们的常见问题解答，自定义 CSS 字段将只接受 CSS。它不接受 SCSS/SASS 或媒体查询和混合。

参考：https://help.outofthesandbox.com/hc/en-us/articles/360022329373-Custom-CSS-Feature-Flex-and-Turbo-Themes

【讨论】：