html - ブラウザの解像度でメディア画面が変わらない

Question

私は初めてメディア スクリーンを操作していますが、メディア スクリーンも想定どおりに機能していないようです....

@media only screen and (max-width : 320px) {

ここにすべての css スタイリングがあり、想定どおりに表示されます。

@media only screen and (max-width : 321px) {

ここに配置したすべての css スタイルは、幅が 321 ピクセルを超えるとページに適用されません。これは発生するはずがありません....たとえば、テキストの色を変更した場合、何も変更されません。

助けてくれてありがとう:)

Answer 1

このメディア クエリに記述した CSS は、以下の幅の画面に適用されます。321px;

@media only screen and (max-width : 321px) {

それを超えてサイズ変更するときに同じCSSを適用する場合は321px、要件に従って幅を増やす必要があります-

@media screen and (max-width: 700px){

Media Queryをクラスまたは要素に次のように記述する必要があります-

@media screen and (max-width: 700px){

body{
  font-size:20px;
  color:red;
}

} 

デモはこちら