如何在 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%;
  }
}

在那些代码中，我对使用分辨率进行了注释，它运行良好，直到我从 1366x768 打开我的网站并在下面打开，它被@media (max-width: 1400px) and (min-width: 1050px) 覆盖。我如何防止它出现这个问题？谢谢

Answer 1

您误以为媒体查询中的第二个参数定义了某个高度。它没有，它仍然定义了 width。

@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”代表高度。