媒体查询无法在SquareSpace上正常工作

问题描述

这可能是简单的AF。我正在尝试微调iPhone X视口上一个按钮的位置。面向iPhone X视口的媒体查询确实可以工作，但是似乎现有基本媒体查询（min-device-width: 600px）中的所有CSS均无法正常工作，并且页面布局中断。

然后，我将基本mq从min-device-width: 600px更改为max-device-width: 600px。页面样式可以使用，但iPhone X的mq会被覆盖，因此无用。

我将iPhone X mq移至基本mq max-device-width: 600px上方，同样，样式被覆盖。

如果这是一个愚蠢的问题，请原谅我，但是我可以使用一个或三个建议。

如果有关系，这是SquareSpace上使用LESS的页面的自定义CSS。

@media screen
  and (min-device-width: 600px)
  and (orientation: portrait) {

    /*... lots of other custom CSS ... */
  
  #new-page-1 { /* Hero / CTA  Container */
    div#block-yui_3_17_2_1_1598143649192_5358 { /* CTA btn shop-all */
      position: relative;
      width: min-content;
      margin: 0;
      top: -.35em;
      right:  -10em;
    }
  } /* closes #new-page-1 */
} /* closes mq */

 /* iPhone X CTA btn shop-all */
@media screen
  and (min-device-width: 375px)
  and (min-device-height: 812px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
    
  div#block-yui_3_17_2_1_1598143649192_5358 { 
    right: -9em;
    top: -0.4em;
  }
}

我尝试通过将iPhone X mq从min-device-width: 375px更改为max-device-width: 375px，并将基本mq更改为 ... and (min-device-width: 376px) and (max-device-width: 600px) ...，在墙上扔些意大利面。这也会破坏页面布局。

谢谢大家。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

less media-queries squarespace