Tutorial by Examples | RIP Tutorial

Basic Example

@media screen and (min-width: 720px) { body { background-color: skyblue; } } The above media query specifies two conditions: The page must be viewed on a normal screen (not a printed page, projector, etc). The width of the user's view port must be at least 720 pixels. I...

CSS • Media Queries

Use on link tag

CSS • Media Queries

mediatype

Media queries have an optional mediatype parameter. This parameter is placed directly after the @media declaration (@media mediatype), for example: @media print { html { background-color: white; } } The above CSS code will give the DOM HTML element a white background color wh...

CSS • Media Queries

Using Media Queries to Target Different Screen Sizes

Often times, responsive web design involves media queries, which are CSS blocks that are only executed if a condition is satisfied. This is useful for responsive web design because you can use media queries to specify different CSS styles for the mobile version of your website versus the desktop ver...

CSS • Media Queries

Width vs Viewport

When we are using "width" with media queries it is important to set the meta tag correctly. Basic meta tag looks like this and it needs to be put inside the <head> tag. <meta name="viewport" content="width=device-width,initial-scale=1"> Why this is impo...

CSS • Media Queries

Media Queries for Retina and Non Retina Screens

Although this works only for WebKit based browsers, this is helpful: /* ----------- Non-Retina Screens ----------- */ @media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- Retina Screens ----------- */ @media scre...

CSS • Media Queries

Terminology and Structure

Media queries allow one to apply CSS rules based on the type of device / media (e.g. screen, print or handheld) called media type, additional aspects of the device are described with media features such as the availability of color or viewport dimensions. General Structure of a Media Query @media ...

CSS • Media Queries

Media queries and IE8

Media queries are not supported at all in IE8 and below. A Javascript based workaround To add support for IE8, you could use one of several JS solutions. For example, Respond can be added to add media query support for IE8 only with the following code : <!--[if lt IE 9]> <script ...

CSS • Media Queries