如何解决媒体查询无法在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 举报,一经查实,本站将立刻删除。