媒体查询未在 Shopify 上正确显示

Question

我想更改我的网站在移动设备上显示我的产品的方式。作为标准，它每行显示一个项目，我想每行显示两个项目。

我使用了以下 CSS 来实现这一点：

@media only screen and (max-width: 600px) {
.product-item{
  width: 50%;
}
}

我在 chrome 和 firefox 浏览器工具中进行了测试，它似乎在移动视图上运行良好。

在真实的 phone 上有白色间隙，有时每行只有 1 个项目。

有人可以帮忙吗？我的网站 url 是：https://blupstore.com/

更新：所发生情况的屏幕截图https://ibb.co/HpnhVcw

Answer 1

您的代码缺少这个：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

如果没有视口，一些移动浏览器将无法正确显示您的页面。
请注意所有类或您想要响应的 ID 都已正确声明对于每个设备。
为您要支持的设备添加媒体查询，来自 css-tricks.com 的列表可能会有帮助： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果你想在正确的行中对齐所有内容，类最终需要一个 float 声明：

@media only screen and (max-width:600px) {
.product-item{
 float : left;
 width: 50%;
 }
 }

如果出现不应该出现的间距，有一个非常简单的解决方案：

 *{
  margin : 0 ;
  padding : 0 ;
 }

你的 css 也有一些解析错误，这也可能导致一些错误。这是您商店的独角兽测试： https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Fblupstore.com%2F&ucn_task=conformance#

Answer 2

我找到了一个临时修复方法。我用过：

@media only screen and (max-width:600px) {
  .product-item{
    float : left !important;
    width: 50% !important;
    border: red solid;
    box-sizing:border-box  
  }
 }

我可以看到第一项弄乱了布局。我将其从类别中删除并重新添加到底部。这绝不是一个修复，但它是一个很好的解决方案，可以在我修复解析错误时修复显示。

如果没有@Thorsten Wolske 和@Nikhil Gangurde 的帮助，这是不可能的

Answer 3

您可以添加一些 css 样式。

@media only screen and (max-width:600px) {
 .product-item:nth-child(2n+1) {
   clear: left !important;
 }
}

媒体查询未在 Shopify 上正确显示

Media query isn't displaying correctly on Shopify

css

shopify

media-queries

responsive-design