媒体查询问题:Safari不能缩放REM中的元素

Media Queries issue: Safari not scaling elements in REM(媒体查询问题:Safari不能缩放REM中的元素)

本文介绍了媒体查询问题: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中的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:媒体查询问题:Safari不能缩放REM中的元素

基础教程推荐