StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I just had this idea, so maybe it's shortsighted, but it seems to work well and might be the most consistent between your CSS and JS.</p> <p>In your CSS you set the max-width value for html based on the @media screen value:</p> <pre><code>@media screen and (max-width: 480px) and (orientation: portrait){ html { max-width: 480px; } ... more styles for max-width 480px screens go here } </code></pre> <p>Then, using JS (probably via a framework like JQuery), you would just check the max-width value of the html tag:</p> <pre><code>maxwidth = $('html').css('max-width'); </code></pre> <p>Now you can use this value to make conditional changes:</p> <pre><code>If (maxwidth == '480px') { do something } </code></pre> <p>If putting the max-width value on the html tag seems scary, then maybe you can put on a different tag, one that is only used for this purpose. For my purpose the html tag works fine and doesn't affect my markup.</p> <hr> <p><strong>Useful if you are using Sass, etc</strong>: To return a more abstract value, such as breakpoint name, instead of px value you can do something like:</p> <ol> <li>Create an element that will store the breakpoint name, e.g. <code><div id="breakpoint-indicator" /></code></li> <li>Using css media queries change the content property for this element, e. g. "large" or "mobile", etc (same basic media query approach as above, but setting css 'content' property instead of 'max-width').</li> <li>Get the css content property value using js or jquery (jquery e.g. <code>$('#breakpoint-indicator').css('content');</code>), which returns "large", or "mobile", etc depending on what the content property is set to by the media query.</li> <li>Act on the current value.</li> </ol> <p>Now you can act on same breakpoint names as you do in sass, e.g. sass: <code>@include respond-to(xs)</code>, and js <code>if ($breakpoint = "xs) {}</code>.</p> <p>What I especially like about this is that I can define my breakpoint names all in css and in one place (likely a variables scss document) and my js can act on them independently. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload