本文介绍了媒体查询问题：Safari不能缩放REM中的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的布局是基于rem的，最近我注意到，Safari(桌面和移动)只缩放字体大小，而不缩放其他元素。 具体地说，它使用第一个媒体查询缩放元素。
在Chrome和Firefox中一切正常。
HTML
<h1>Hello Circle</h1>
<div class="circle"></div>
CSS
html,
body {
font-size: 62.5%;
background-color: red;
}
@media (max-width: 900px) {
html,
body {
font-size: 50%;
background-color: green;
}
}
@media (max-width: 579px) {
html,
body {
font-size: 30%;
background-color: blue;
}
}
.circle {
width: 20rem;
height: 20rem;
background-color: yellow;
border-radius: 50%;
}
h1 {
font-size: 3rem;
}
小提琴：http://jsfiddle.net/ew97d4rj(黄色圆圈应该随着每个MQ而变小-就像文本一样-但在Safari中，圆圈不会在最小的MQ中缩小。)
我猜媒体查询有问题，因为如果我使用下面的MQS，它可以工作，但会破坏我的布局，因为正常大小仅在579px和700px之间使用。
html,
body {
font-size: 62.5%;
background-color: red;
}
@media (max-width: 579px) {
html,
body {
font-size: 30%;
background-color: green;
}
}
@media (min-width: 700px) {
html,
body {
font-size: 90%;
background-color: blue;
}
}
推荐答案
我现在非常确定，这是一个Safari最小字体大小问题，与媒体查询无关。如果我使用200%/150/100%字体大小的媒体查询，它就"很好"。
当我搜索解决方案时，我找到了使用-webkit-text-size-adjust: none的解决方案，但它似乎不再受支持。至少，它没有任何效果。
此外，我的假设是，文本比例如假设的那样是错误的。它只是缩放Safari设置的最小字体大小。
我在计算机上使用Safari 10.1，在手机上使用Safari 11。
这篇关于媒体查询问题：Safari不能缩放REM中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！