メディアのクエリの高さを最小幅での幅として使用する

Question

レスポンシブモバイルの最初のホームページを作成しました。ラップトップ用のメディアクエリを作成しました（最小幅：768ピクセル）。デスクトップデバイス（最小幅：1080px）でも、何らかの理由で最小幅1080pxが高さによっても影響を受けるため、ラップトップのクエリが機能しなくなります。実際には1366x768ウィンドウを使用すると1080pのクエリのみが使用されますが、私は768pのクエリで1079x768pxウィンドウの作業を使用します。また、ラップトップのクエリの前にデスクトップのクエリを置くと、それはもはや機能しません。ここでは、コードがあります：

@media screen and (min-width: 768px), screen and (max-width: 1079px) { 
    div#divRegistrazione { 
     margin-top: 3vh; 
    } 
    input[type=text], 
    input[type=password] { 
     padding: 0.7em 1.5vw; 
    } 
    input[type=date] { 
     font-size: 2em; 
     padding: 0.2em 1.5vw; 
    } 
} 

@media screen and (min-width: 1080px) { 
    input[type=text], 
    input[type=password] { 
     padding: 0.9em 1.5vw; 
    } 
    input[type=date] { 
     font-size: 2em; 
     padding: 0.45em 1.5vw; 
    } 
    div#divRegistrazione { 
     margin-top: 6vh; 
    } 
} 

Answer 1

これは想像するのは難しいですが、私はあなたの問題はあなたが画面の大きさを可視化する方法だと思います。一番上のメディアクエリのため、（768px以上）より大きいに影響します。これには、最小幅：1080ピクセルのクエリのすべてが含まれます。

幅が1080を超える場合は、最初のクエリで設定されていて、2番目のクエリで上書きされています。

また、最初のクエリのカンマがあなたを引き上げていると思います。 ここでは、メディアクエリーが相互にオーバーライドする方法の例を示します。最後のクエリで.media_query_1を呼び出す必要はありません。なぜなら、それでもまだmin-width: 769pxがあるからです。

これを新しいウィンドウで見て、クエリがどのように反応するかを確認してください。

<style> 
 
/*THIS ONE AFFECTS SCREENS SMALLER THAN 769PX */ 
 
@media screen and (max-width: 768px) { 
 
    #divRegistrazione {margin-top: 3vh;} 
 
    input[type=text], input[type=password] {padding: 0.7em 1.5vw;} 
 
    input[type=date] {font-size: 1em; padding: 0.2em 1.5vw;} 
 

 
    .media_query_1 {display:block;} 
 
    .media_query_2 {display:none;} 
 
    .media_query_3 {display:none;} 
 
} 
 
/*THIS ONE AFFECTS ALL SCREENS LARGER THAN 768PX */ 
 
@media screen and (min-width: 769px) { 
 
    #divRegistrazione {margin-top: 6vh;} 
 
    input[type=text], input[type=password] {padding: 0.9em 1.5vw;} 
 
    input[type=date] {font-size: 2em; padding: 0.45em 1.5vw;} 
 

 
    .media_query_1 {display:none;} 
 
    .media_query_2 {display:block;} 
 
    .media_query_3 {display:none;} 
 
} 
 
/*THIS ONE AFFECTS ALL SCREENS LARGER THAN 1080PX, INCLUDING THE ABOVE MEDIA QUERY */ 
 
@media screen and (min-width: 1080px) { 
 
    /*these override the classes in the above query */ 
 
    .media_query_2 {display:none;} 
 
    .media_query_3 {display:block;} 
 
    
 
} 
 
</style> 
 
<div id="divRegistrazione"> 
 
    <div class="media_query_1">SMALL SCREEN SIZE</div> 
 
    <div class="media_query_2">MEDIUM SCREEN SIZE</div> 
 
    <div class="media_query_3">LARGE SCREEN SIZE</div> 
 
     <input type="text" name=""><br /> 
 
     <input type="password" name=""><br /> 
 
     <input type="date" name=""> 
 
</div>