简体   繁体   English

CSS媒体查询宽度或高度

[英]CSS media queries for width or height

I placed a logo in the center of a full-screen-page. 我在全屏页面的中央放置了一个徽标。

img.logo {
        width: 920px;
        height: 552px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -460px;
        margin-top: -276px;
    }

This is working fine. 一切正常。 Now i want different sizes on different device heights and widths so i tried using media queries. 现在,我想在不同的设备高度和宽度上使用不同的大小,因此我尝试使用媒体查询。

@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;
    }
}

But this still works if both parameters are changing at the same time. 但是,如果两个参数同时更改,这仍然有效。 I want it separated, so you can change the browser height and the image size changes OR the browser width OR both. 我希望将其分开,因此您可以更改浏览器高度和图像大小,或者更改浏览器宽度,或同时更改两者。

The image (the logo) should always stay in the middle of the page. 图像(徽标)应始终位于页面中间。

You don't need all those margin offsets if you centre the image in its parent this way: 如果以这种方式将图像居中放置在父图像中,则不需要所有这些边距偏移量:

img.logo {
   width: 350px; //or whatever
   height: 350px; //or whatever (maybe auto)
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
}

Then you can use media queries to change just the image size: 然后,您可以使用媒体查询来更改图像大小:

@media (max-width: 400px) {
    img.logo {
        width: 150px;
        height: 150px;
    }   
}

I made a JSFiddle example 我做了一个JSFiddle示例

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM