css媒体查询改变上边距,CSS媒体查询宽度或高度
我在一個全屏頁面的中心放置了一個徽標(biāo)。
img.logo {
width: 920px;
height: 552px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -460px;
margin-top: -276px;
}
這很好用。
現(xiàn)在我想在不同的設(shè)備高度和寬度上使用不同的尺寸，所以我嘗試使用媒體查詢。
@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;
}
}
但如果兩個參數(shù)同時發(fā)生變化，這仍然有效。
我希望它分開，因此您可以更改瀏覽器高度和圖像大小更改或?yàn)g覽器寬度或兩者。
圖像(徽標(biāo))應(yīng)始終位于頁面中間。
總結(jié)
以上是生活随笔為你收集整理的css媒体查询改变上边距,CSS媒体查询宽度或高度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 服务器2008 系统日志 提示打印机,介
- 下一篇： CSS伪元素 after 实现鼠标悬浮信