How to work with CSS media queries?

Question

How to work with CSS media queries?

Navigation

#1 by (4 votes)

4

I would like information on how to use media queries .

How do I set media of a site below?

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

As my site is extended to the entire screen, it's a layout that height does not go down by doing sidebar, and I pull the media by height . p>

Example:

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

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

How to solve?

css media-queries

asked by anonymous 05.06.2014 / 21:20

1 answer

Windows Ping should return only the response values How to do "OR" between SubQuerys using LINQ C #

score 4 · Answer 1

Separate the horizontal and vertical measurements of each element in their horizontal and vertical queries :

@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 beware that, being very specific, it gets trickier to spot problems:

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