{"id":1506,"date":"2020-02-16T16:15:13","date_gmt":"2020-02-16T21:15:13","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1506"},"modified":"2022-07-19T20:33:49","modified_gmt":"2022-07-19T20:33:49","slug":"media-queries","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/media-queries\/","title":{"rendered":"Media Queries"},"content":{"rendered":"\n
\"\"
Photo by Christopher Gower<\/a>.<\/figcaption><\/figure>\n\n\n\n

What are Media Queries? <\/h2>\n\n\n\n

Media queries are one of the primary components of responsive design1<\/a>. A media query is a specific CSS component that that lets you set up extra CSS rules for different viewports or screen sizes. For example, you might want your <p><\/code> element’s font size to be 28 pixels when viewed on a desktop, but only 18 pixels when viewed on a mobile phone. A media query will let you achieve that result. <\/p>\n\n\n\n

Let’s get started by looking at the syntax for a media query. Remember, this will be part of your CSS document. <\/p>\n\n\n\n

Media Query Syntax<\/h2>\n\n\n\n
\"Media
Media query example.<\/figcaption><\/figure>\n\n\n\n

First we will notice @media<\/code>. All media queries will start this way; @media<\/code> is a signal to the browsers that the browsers will need to apply new CSS rules if certain conditions are true. In this case, the conditions we are using are screen<\/code> and max-width: 600px<\/code>.<\/p>\n\n\n\n

After the @media<\/code> declaration we get the “media type<\/strong>.” In this example the media query will only been applied when the media type is screen<\/code>. There are several other media types we could choose from, including: <\/p>\n\n\n\n