Tutorial by Examples



@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...
<link rel="stylesheet" media="min-width: 600px" href="example.css" /> This stylesheet is still downloaded but is applied only on devices with screen width larger than 600px.
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...
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...
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...
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...
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 ...
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 ...

Page 1 of 1