如何在css中正確使用@media

Question

如何在css中使用@media作爲特定分辨率？所以我想讓我的側欄更改取決於用戶分辨率，所以我使用@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打開我的網站和波紋管，它是覆蓋與@media (max-width: 1400px) and (min-width: 1050px)。我如何防止這個問題呢？謝謝

Answer 1

你犯了一個小錯誤，認爲媒體查詢中的第二個參數定義了一定的高度。它沒有，它仍然定義了寬度。

@media (max-width: 1920px) and (min-width: 1080px){ 
// You're assuming the screen's maximal width to be 1920, 
// and it's minimal width to be 1080px, which means this CSS 
// is applied when the screen's width is 1080px or more, 
// but less than 1920px; 

    .logo1 { 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2) { 
    margin-top: 100%; 
    } 
} 

你真正想要的是這樣的：

@media (min-width: 1920px) { /*1920px or larger*/ 
    .logo1 { 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 100%; 
    } 
} 

@media (min-width: 1680px) { /*for 1680 x 1050*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 90%; 
    } 
} 

@media (min-width: 1600px) { /*for 1600 x 900*/ 
    .logo1{ 
    margin-top: 50%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 40%; 
    } 
} 

@media (min-width: 1440px) { /*for 1440 x 900*/ 
    .logo1 { 
    margin-top: 40%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 50%; 
    } 
} 

@media (min-width: 1400px) { /*for 1400 x 1050*/ 
    .logo1{ 
    margin-top: 70%; 
    } 

    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 90%; 
    } 
} 

@media (min-width: 1366px) { /*for 1366 x 768 until 1024 x 768*/ 
    .socmed a:nth-child(1), .socmed a:nth-child(2){ 
    margin-top: 20%; 
    } 
} 

請記住，你改變「的範圍」，而不是這些規則的具體視口。您不會更改基於1920x1080屏幕的CSS，但當屏幕具有足夠的空間（即1920像素或更寬）時更改它

Answer 2

您只指定寬度和查詢重疊。 「1920x1080」中的「1080」代表高度。