我在我的 CSS 中使用以下代码进行媒体查询:
@media all {html { font-size: 62.5%; } }/* 62.5%: 1em = 10px */
@media all and (max-width: 1200px) { html,body { font-size: 50%; } }
@media all and (max-width: 1000px) { html,body { font-size: 45%; } }
@media all and (max-width: 800px) { html,body { font-size: 40%; } }
但是当字体大小 > 62.5% 使用 webkit 正确调整大小时,大小 <62.5% 仅调整文本大小,而不是元素的宽度、高度、填充等。
例如:
.loader {
width:38rem;
height:36rem;
position:relative;
}
只会放大其中的文本,而不是元素的宽度和高度。
这个问题只出现在 webkit 浏览器中,不会出现在 Firefox 中:
经过大量研究,我找不到任何解决这个问题的方法,有什么想法吗?您可以在这里找到现场演示:http: //partytube.eu01.aws.af.cm/