如何在css中使用@media作為特定分辨率？所以我想讓我的側(cè)欄更改取決于用戶分辨率，所以我使用@media。如何在css中正確使用@media

這是示例代碼：

@media (max-width: 1920px) and (min-width: 1080px){ /*for 1920 x 1080*/

.logo1{

margin-top: 70%;

}

.socmed a:nth-child(1), .socmed a:nth-child(2){

margin-top: 100%;

}

}

@media (max-width: 1680px) and (min-width: 1050px){ /*for 1680 x 1050*/

.logo1{

margin-top: 70%;

}

.socmed a:nth-child(1), .socmed a:nth-child(2){

margin-top: 90%;

}

}

@media (max-width: 1600px) and (min-width: 900px){ /*for 1600 x 900*/

.logo1{

margin-top: 50%;

}

.socmed a:nth-child(1), .socmed a:nth-child(2){

margin-top: 40%;

}

}

@media (max-width: 1440px) and (min-width: 900px){ /*for 1440 x 900*/

.logo1{

margin-top: 40%;

}

.socmed a:nth-child(1), .socmed a:nth-child(2){

margin-top: 50%;

}

}

@media (max-width: 1400px) and (min-width: 1050px){ /*for 1400 x 1050*/

.logo1{

margin-top: 70%;

}

.socmed a:nth-child(1), .socmed a:nth-child(2){

margin-top: 90%;

}

}

@media (max-width: 1366px) and (min-width:768px){ /*for 1366 x 768 until 1024 x 768*/

.socmed a:nth-child(1), .socmed a:nth-child(2){

margin-top: 20%;

}

}

這些代碼，我把用途分辨率的評論，它工作得很好，直到我從1366×768打開我的網(wǎng)站和波紋管，它是覆蓋與@media (max-width: 1400px) and (min-width: 1050px)。我如何防止這個(gè)問題呢？謝謝

2017-03-16

Rian

+0

您錯(cuò)誤地使用了寬度和高度。 –

+0

噢，我的上帝，所以我應(yīng)該使用最小寬度和最小高度？ @Roberrrt –

總結(jié)

以上是生活随笔為你收集整理的css中 media的用法,如何在css中正确使用@media的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。