css - メディア クエリとアニメーション テキスト サイズ

Question

メディア クエリを使用して、ナビゲーションのフォント サイズを変更しています。

/* Large desktop */
@media (min-width: 1200px)
{  

#nav-options{
    margin: 45px 0 0 20px;
    li{
        margin: 0 15px 0 15px;
        font-size: 20px;
    }
}
}

/* Desktop */
@media (min-width: 980px) and (max-width: 1199px)
{  
#nav-options{
    margin: 45px 0 0 0px;
    li{
        margin: 0 0px 0 0px;
            font-size: 10px;
    }
}
}

問題は、ウィンドウのサイズを変更すると、テキストが別のサイズにアニメーション化されることです。オフにする方法はありますか？

Answer 1

と を使用する必要がmax-device-widthありmin-device-widthます。ウィンドウサイズではなく、画面解像度でのみ機能します

Answer 2

フォントサイズを変更しないでください。これで、解像度ごとに異なるサイズを使用できます。