css媒体查询改变上边距,CSS媒体查询宽度或高度

我在一个全屏页面的中心放置了一个徽标。

img.logo {

width: 920px;

height: 552px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -460px;

margin-top: -276px;

}

这很好用。

现在我想在不同的设备高度和宽度上使用不同的尺寸，所以我尝试使用媒体查询。

@media (max-width: 991px), (max-height: 460px) {

img.logo {

width: 235px;

height: 141px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -117px;

margin-top: -70px;

}

}

@media (min-width: 992px) and (max-width: 1199px), (min-height: 300px) and (max-height: 649px) {

img.logo {

width: 533px;

height: 320px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -276px;

margin-top: -160px;

}

}

@media (min-width: 1200px), (min-height: 650px) {

img.logo {

width: 920px;

height: 552px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -460px;

margin-top: -276px;

}

}

但如果两个参数同时发生变化，这仍然有效。

我希望它分开，因此您可以更改浏览器高度和图像大小更改或浏览器宽度或两者。

图像(徽标)应始终位于页面中间。