Explanation: Media queries represent the use of device (or document) size to apply. In terms of overall layout, we can use either linked imported, or embedded styles and media queries. In most general terms, we provide the media type and an expression. we can use commas to separate parts of our condition.
- Linked – <link href=“….css” rel=”stylesheet” media=”only screen and (max-width:900px), only screen and (max-width: 683px) and (orientation:landscape)”>
- Imported – @import url(….css) only screen and (max-width:900px), only screen and (max-width: 683px) and (orientation:landscape);
- Media blocks (within <style> element – @media only screen and (max-width:900px), only screen and (max-width: 683px) and (orientation:landscape);
Example HTML code:
Note that we supply minimum/ maximum values and the appropriate CSS will be applied.
<link href=”default.css” rel=”stylesheet” type=”text/css”>
<!– tablet –>
<link href=”tablet.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width:400px) and (max-width:770px)”>
<!– phone –>
<link href=”phone.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width:0px) and (max-width:399px)”>
Example page (view the source code): http://learning-html5.info/CSS3/MediaQuery/ (should work in most modern browsers). To see the effect, re-size the browser window. As the size shrinks, different CSS styles will be applied (until there is only a single column).
References:
Loading ...