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

您只指定了宽度和查询重叠。 “1920x1080”中的“1080”代表高度。

Answer 2

您认为媒体查询中的第二个参数定义了特定高度，这是一个小错误。它没有，它仍然定义了 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%;
  }
}

请记住，您正在更改 'ranges' 而不是使用这些规则的特定视口。您不会根据 1920x1080 屏幕更改 CSS，但是当屏幕有足够 space，即宽度为 1920 像素或更多时，您可以更改

css 如何正确使用@media

How to use @media correctly in css

html

css

responsive-design

media-queries

screen-resolution