媒体查询中的像素与我的浏览器不匹配

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时，主页按钮仍显示媒体查询css 800px中的homebutton的大小，而不是1024px。为什么会这样？我的代码本身是错误的，还是我对媒体查询逻辑的误解。我希望有人能帮助我。

问候。

Answer 1

尝试将798px用于800px内容宽度。您没有考虑浏览器的滚动和边框的宽度。