Kyle's Awesome Awful Websites

Media Queries

Media queries allow us to style elements dynamically based on conditions of the output device, aka the viewport. This includes size, resolution, etc. Most commonly used in responsive web design.

Good examples of media queries being used: mediaquer.is – showcases sites that use them well.

A media query is a style block containing one or more logical expressions that are either true or false. The @media rule specifies the media type we want to target. There are several you can use. If you do not specify one, the all type will be applied, which specifies to all devices. For browsers, you select the screen media type. Next, you put in the and keyword, which is called a logical operator, and combines the screen media type, with the media feature/expression that will go inside the parenthesis. The expression is what checks for the true/false conditions of the media features defined. Some…

View original post 2,634 more words

Advertisements