@media

[Aucun]

I'm using @media to try and get the screen resolution but I'm not sure how the statements work.

 

For example, if I want know when the viewer has a screen of 1920*1080; here is what I have so far:

@media (min-width: 1920px) { }

Is there a better way of doing this? Also, when you have many @media's how can you define an "if" type statement to check for different resolutions.

[davej]

In my limited experience you simply work your way down from widest screen to narrowest screen.

<style>/* default styles */@media screen and (min-width: 901px){/* styles necessary for largest screens */}@media screen and (min-width: 301px) and (max-width: 900px){/* changes to styles necessary for smaller screens */}@media screen and (max-width: 300px){/* changes to styles necessary for mobile screens */}</style>

Edited October 9, 2013 by davej

[thescientist]

Have you tried looking up any tutorials/references on media queries?

https://www.google.com/search?q=intro+to+css+media+queries&oq=intro+to+css+media+queries&aqs=chrome..69i57.4662j0j7&sourceid=chrome&espvd=210&es_sm=119&ie=UTF-8

[newseed]

Give this a look: Media Query

 

The article is 3 years old and so IPad was the dominate tablet at that time. Today Android tablets are rampant and can use the same query listed in that link.