How to work with CSS media queries?

Asked

Viewed 904 times

4

I would like some information on how to use media queries.

How do I define media of a website in the below?

  • 2560 x 1440
  • 2560 x 1080
  • 1920 x 1080
  • 1366 x 768
  • 1280 x 1024
  • 1280 x 768

Being that my site is extended the whole screen, it is a layout that the height doesn’t go down doing sidebar, and I pull the media through height.

Example:

@media screen and (min-height:768px) and (max-height:1080px){
    ...
}

Use the values 2560 x 1440, 2560 x 1080, 1920 x 1080, 1366 x 768 and 1280 x 768 conflicts in media.

How to solve?

css media-queries

  • A note for other users: if the site scrolls vertically (which is not your case, by the text), you should use the width to make the wishes, and not the height. It only makes sense to calibrate the vertical media for things that have horizontal scrolling, (or none, as in the question) or for page-specific elements like navigation, etc., and not for the entire layout. In extreme cases, you can use width and height together in the same query, but it’s usually too much. Perhaps in the case of the specific question, it is the solution.

1 answer

4

Separate the horizontal and verical measures of each element in their respective darlings horizontal and vertical:

@media screen and (min-width:1280px)
   ... aqui voce põe larguras e posições horizontais dos elementos ...
   #minhadiv {width: 400px; left: 10px;}
}

@media screen and (min-width:1366px)
   ... aqui voce põe larguras e posições horizontais dos elementos ...
   #minhadiv {width: 450px; left: 15px;}
}

@media screen and (min-width:1920px)
   ... aqui voce põe larguras e posições horizontais dos elementos ...
   #minhadiv {width: 600px; left: 20px;}
}

@media screen and (min-height:768px)
   ... aqui voce põe alturas e posições verticais dos elementos ...
   #minhadiv {height: 200px; top: 10px;}
}

@media screen and (min-height:1080px)
   ... aqui voce põe alturas e posições verticais dos elementos ...
   #minhadiv {height: 300px; top: 20px;}
}

If you need a special combination, just use the two measures together, but be careful that being very specific makes it more difficult to locate problems:

@media screen and (min-width:1366px) and (min-height:1080px)
   #minhadiv {width: 200px; height: 300px; left:80px; top: 20px; color:#eee ... }
}

Browser other questions tagged css media-queries

You are not signed in. Login or sign up in order to post.