我有这个网站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%;
}
}
如果我删除这些样式,它就会起作用。
我的问题是
为什么会这样?
此问题的根本原因可能是什么以及如何解决?
最佳答案
您的媒体查询 rem 单位基于您的 html
字体大小。因此,当一个发生变化时,另一个也在发生变化,从而导致循环或反弹效应。
要解决此问题,您可以更改字体大小以针对 html
元素以外的内容,例如 body
。
关于jquery - 网站在 safari 中以较小的屏幕尺寸不断闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50976078/