Question

我有这个网站https://www.scit.com.br/

此功能在中型和较小屏幕上的所有浏览器（Safari浏览器除外）中都可以正常使用。问题是页面开始像放大和缩小一样闪烁。检查显示在标签中添加了：before和：after重复。这是由style.css文件引起的。我尝试删除所有js文件，因此JS并非罪魁祸首。

稍后通过跟踪和错误删除代码。我发现以下CSS引起了问题

style.css行：2080、2118、2156、2203

@media (min-width: 36rem) and (max-width: 47.9375rem) {
    html {
        font-size: 85%;
    }
}

@media (min-width: 48rem) and (max-width: 61.9375rem) {
    html {
        font-size: 90%;
    }

}

@media (min-width: 62rem) and (max-width: 74.9375rem) {
    html {
        font-size: 95%;
    }

}


@media (min-width: 75rem) {
    html {
        font-size: 100%;
    }
}

如果我删除这些样式，它将起作用。

我的问题是

为什么会这样？
什么可能是此问题的根本原因以及如何解决？

Answer 1

您的媒体查询rem单位基于您的html字体大小。因此，当一个改变时，另一个也会改变，从而导致循环或反弹效果。

要解决此问题，您可以更改字体大小以定位html元素以外的元素，例如body。

Answer 2

我刚刚遇到此页面，而我自己也遇到过同样的问题。我只有在野生动物园里有闪烁，其他所有浏览器都可以。

简而言之-使用ems

在媒体查询中，em和rem不受HTML中字体大小更改的影响，因为它们基于浏览器的内部font-size属性-但是，Safari对于rems不遵循此规则。< / p>

例如，默认情况下，最小25em断点以400px插入，如果将html字体大小更改为2rem，则它仍以400px插入。 html字体大小更改为2rem的25rem最小宽度断点将以Safari中的800px分辨率启动（与Zell Liew的示例/下文类似），

我检查了您的代码，发现您应用了类似的解决方案，为px切换了rems，这可以工作，但是px不太灵活，如果用户增加了浏览器的字体大小，则断点将保持不变

/*@media (min-width: 36rem) and (max-width: 47.9375rem) {*/
@media (min-width: 576px) and (max-width: 767px) {

我碰到了这篇出色的文章，进一步解释了事情 https://zellwk.com/blog/media-query-units/

从他的例子中模拟出来以进行视觉展示 https://codepen.io/webknit/pen/KYLNVW

网站在Safari中以较小的屏幕尺寸不断闪烁

2 个答案: