How to use @media correctly in css

问题

How to use @media in css for certain resolution? So I want to make my sidebar changes depend on the user resolution, so I use @media.

This is the example code:

    @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%;
  }
}

in those code I put comment of the uses resolution, it works well until I opened my web from 1366x768 and bellow, it was overwrite with @media (max-width: 1400px) and (min-width: 1050px). How I prevent it from this problem? thanks

回答1:

You're making the tiny mistake to think the second parameter in the media query defines a certain height. It doesn't, it still defines the 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%;
  }
}

What you actually want is this:

@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%;
  }
}

Keep in mind that you're changing 'ranges' instead of specific viewports with these rules. You don't change the CSS based on a 1920x1080 screen, but you change it when a screen has enough space, namely 1920 pixels in width or more

回答2:

You are specifying only the width and the queries overlap. "1080" in "1920x1080" stands for height.

来源：https://stackoverflow.com/questions/42830886/how-to-use-media-correctly-in-css

标签

html

css

responsive-design

media-queries

screen-resolution