Question

示例模板：https://eamon-demo.squarespace.com/#overview-eamon

视差滚动往往会在手机上断断续续，所以我想在屏幕尺寸达到一定宽度后禁用它。到目前为止，我已经幸运地在自定义CSS部分中更改了较小屏幕的字体：

@media only screen and (max-width: 640px) {
   h1 { font-size: 60px; }
   h2 { font-size: 35px; }
   h3 { font-size: 30px; }
   body { font-size: 18px; }
 }

Squarespace在“设计”选项卡中提供了一个按钮，您可以勾选以打开和关闭视差。当屏幕尺寸变小时，是否可以通过自定义CSS勾选该按钮？感谢。

Answer 1

如果SquareSpace阻止您禁用视差效果，可以尝试手动覆盖transform属性：

@media only screen and (max-width: 640px) {
    #parallax-images .image-container img {
        transform: initial !important;
    }
}

Answer 2

我能够使用以下自定义css定位并覆盖图形元素的样式，从而通过平方空间在移动视图上禁用视差：

@media only screen and (max-width: 640px) { 
  figure[style] { 
    transform: initial !important; 
  } 
}

它将应用于宽度小于或等于640px并覆盖transform css property的屏幕，这实际上是决定视差的原因。

方形空间：仅在移动设备上禁用视差滚动

2 个答案: