3

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/

4

1 に答える 1