ページを更新しなくても別のメディアのCSSを変更するには

Question

私は別のサイズのページを探したいのですが、私のページにはうまくいきました。私は、ページ上の適切な場所にアニメーションを維持するために、パーセンテージを使用しています。

私は異なるサイズごとに@media(min-width: ---px)を使用しています。しかし、ページは、ページがリフレッシュされた後にのみ、異なるサイズのメディアcssを受け入れます。

キャッシュ設定などを無効にする方法はありますか。私はなぜ@メディアが異なるサイズのデバイスではない同じデバイス上の異なるサイズのページではないが、それは私の問題を解決するだろうと理解するだろう。

#car { 
    max-width: 10%; 
    max-height: 10%; 
    z-index: 2; 
    -webkit-animation-name: drive; 
    -webkit-animation-duration: 4s; 
    animation-name: drive; 
    animation-duration: 4s; 
    animation-iteration-count:infinite; 
} 

@-webkit-keyframes drive { 
    0% {left:-10%; top: 15%;} 
    100% {left:110%; top: 15%;} 
} 

@media(min-width: 750px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 16%;} 
     100% {left:110%; top: 16%;} 
    } 
} 

@media(min-width: 850px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 16%;} 
     100% {left:110%; top: 16%;} 
    } 
} 

@media(min-width: 950px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 17%;} 
     100% {left:110%; top: 17%;} 
    } 
} 

@media(min-width: 1050px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 18%;} 
     100% {left:110%; top: 18%;} 
    } 
} 

@media(min-width: 1150px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 18%;} 
     100% {left:110%; top: 18%;} 
    } 
} 

@media(min-width: 1250px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 19%;} 
     100% {left:110%; top: 19%;} 
    } 
} 

@media(min-width: 1350px) { 
    @-webkit-keyframes drive { 
     0% {left:-10%; top: 20%;} 
     100% {left:110%; top: 20%;} 
    } 
} 

Answer 1

@media（最小幅：--- px）は、異なるサイズのページに対して正確にスタイルを設定します。それは問題ではありません。ブラウザウィンドウのサイズを変更しようとすると、どのように適用されますか。

便宜上、ChromeとFirefoxには、デバイスのエミュレーション下のページを表示するための特別なツールがあります。しかし、あなたのCSSルールは、デバイスではなく、エミュレーションのウィンドウのサイズに対してのみ動作します。

BTW：エミュレーション中にChromeがいくつかの追加ヘッダーを送信しますが、CSSには適用されません。