index.html (3707B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>banna - ramblings</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <link rel="stylesheet" href="/styles/style.css" /> 8 <link rel="stylesheet" href="/styles/look.css" /> 9 <link rel="stylesheet" href="/styles/codetheme.css" /> 10 <script src="/scripts/highlight.js"></script> 11 <script>hljs.initHighlightingOnLoad();</script> 12 </head> 13 14 <body> 15 <div id="sidebar"> 16 <div id="logo"> 17 <a href="/"> 18 <img src="/banna.png" alt="banna.tech" height="45" width="201" /> 19 </a> 20 </div> 21 <div id="nav"> 22 <a class="current" href="/post">blog</a> 23 <a class="" href="/things">things</a> 24 <a class="" href="/about">about</a> 25 </div> 26 </div> 27 28 <div id="wrapper"> 29 <div id="content"> 30 <div class="post"> 31 <a href="/post/query_selectors_in_css" class="link"><h1 class="header">Query Selectors in CSS</h1></a> 32 <span class="date">Posted on January, 07 2014</span> 33 <div class="content"> 34 <p>CSS3 has some funky features that allow you to make dynamic websites without using JavaScript once. One of these features is the <code>@media</code> selector. <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Syntax">documentation</a></p> 35 36 <p><code>@media</code> allows you to enable properties on elements depending on screen size.</p> 37 38 <p>To do this, simply type <code>@media <condition> { css }</code></p> 39 40 <p>example:</p> 41 42 <pre><code>@media (min-height:600px) and (orientation:landscape) { 43 div { 44 background-color:red; 45 } 46 }</code></pre> 47 48 <p><code>(min-height:600px)</code> is a condition where <code>min-height</code> checks if the minimum height is <code>600px</code>. The <code>and</code> is a logical operator specifying that both conditions on either side must evaluate to true, to be true.</p> 49 50 <p>You can implement this selector when loading style-sheets onto your HTML document to select between completely different style-sheets based on screen size.</p> 51 52 <pre><code><link rel="stylesheet" media="only screen and (max-width: 999px) and (min-width:635px)" href="style.css" /> 53 </code></pre> 54 <p>The <code>media</code> attribute in the link element allows a stylesheet to be evaluated & conditionally loaded.</p> 55 56 <p>Here's an example of loading 3 different stylesheets for desktop, tablet and mobile</p> 57 58 <pre><code><meta name="viewport" content="width=device-width, initial-scale=1"> 59 <link rel="stylesheet" media="only screen and (max-width: 634px)" href="mobile.css" /> 60 <link rel="stylesheet" media="only screen and (max-width: 999px) and (min-width:635px)" href="tablet.css" /> 61 <link rel="stylesheet" media="only screen and (min-width: 1000px)" href="desktop.css" /> 62 </code></pre> 63 <p>Here's a list of all the conditions (<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Media_features">documentation</a>):</p> 64 65 <ul> 66 <li> 67 <p>width | min-width | max-width</p> 68 </li> 69 <li> 70 <p>width | min-width | max-width</p> 71 </li> 72 <li> 73 <p>device-width | min-device-width | max-device-width</p> 74 </li> 75 <li> 76 <p>device-height | min-device-height | max-device-height</p> 77 </li> 78 <li> 79 <p>aspect-ratio | min-aspect-ratio | max-aspect-ratio</p> 80 </li> 81 <li> 82 <p>device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio</p> 83 </li> 84 <li> 85 <p>color | min-color | max-color</p> 86 </li> 87 <li> 88 <p>color-index | min-color-index | max-color-index</p> 89 </li> 90 <li> 91 <p>monochrome | min-monochrome | max-monochrome</p> 92 </li> 93 <li> 94 <p>resolution | min-resolution | max-resolution</p> 95 </li> 96 <li>scan | grid</li> 97 </ul> 98 </div> 99 </div> 100 101 102 </div> 103 </div> 104 </body> 105 </html>