Media Query

• media query
• @media

Change CSS based on

• min-width
• max-width
• min-height
• max-height
• min-device-height
• max-device-height
• device-aspect-ratio
• orientation (portrait or landscape)
• …

You can use and, and the comma , to indicate or and even the word not to have the full power of boolean expressions.

You can use @media queries inside a single style-sheet, or you can load different style-sheets base on the @media query.

Probably the most common thing to use @media queries for is to change the site depending on the width of the browser using the min-width and max-width fields, but you can also use the others listed above.

Of course you can also use it to check the media type: screen, print, etc. css media queries