通过不在webkit中工作的媒体查询重新调整大小？

Question

我在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%; }   }

但字体大小＆gt; 62.5％使用webkit正确调整大小，大小<62.5％仅调整文本大小，但不调整元素的宽度，高度，填充等。

例如：

.loader {
    width:38rem;
    height:36rem;
    position:relative;
}

只会缩放其中的文字，而不是元素的宽度和高度。

此问题仅发生在webkit浏览器中，而不是在Firefox中：

经过大量的研究后，我找不到任何解决这个问题的方法，任何想法？ 您可以在此处找到现场演示：http://partytube.eu01.aws.af.cm/

Answer 1

我认为您只需要更改媒体查询

@media  (max-width: 800px) {    html,body { font-size: 40%; }   }
@media (min-width:801px) and (max-width: 1000px) {   html,body { font-size: 45%; }   }
@media (min-width: 1001px) and (max-width: 1200px) {   html,body { font-size: 50%; }   }