我正在将媒体查询添加到我的 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)
但是，当我尝试将浏览器宽度扩展到 802 像素时，主页按钮仍会在媒体查询 css 中显示主页按钮的大小 800 像素而不是 1024 像素。为什么会这样？我的代码本身是错误的，还是我对媒体查询逻辑的误解。我希望有人可以帮助我。
问候。