css - メディア クエリのピクセルがブラウザと一致しません

Question

asp.net webapp にメディア クエリを追加しています。携帯電話の種類に応じて、webapp を変更し、外観を変えようとしています。私のメディア クエリのコードと、私が受け取った奇妙な問題を紹介します。

/*Media Query*/

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

#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:1000px;
width:50%;
}
}   

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

#homebutton input[type=image] {
position:absolute;
left:50%;
top:0%;
margin: 0px;
height:70px;
width:50%;
}
}

私の理解に基づいて、ブラウザのサイズが 801px ～ 1024px の場合は常に、

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

コード。ブラウザのサイズが 0px ～ 800px の場合、この CSS コード行を実行する必要があります。

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

ただし、ブラウザーの幅を 802px に拡張しようとすると、ホームボタンは 1024px ではなく、メディアクエリ css 800px でホームボタンのサイズを表示します。なぜそうなのですか？私のコード自体が間違っているのでしょうか、それともメディア クエリ ロジックを誤解しているのでしょうか。誰かがこれについて私を助けてくれることを願っています。

よろしく。