ab-mediaquery
Version:
AB-mediaQuery is the JavaScript side of media queries. It proposes you some very useful methods for your scripts
16 lines • 2.31 kB
HTML
<html lang="en" class="h-100"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>AB-mediaQuery example</title><link rel="stylesheet" href="styles.da1d61e3.css"><script defer="" src="src.ac82b756.js"></script><script defer="" src="example.cb1e9e8e.js"></script><link rel="stylesheet" href="example.2a0dbcf6.css"></head><body class="helvetica h-100"> <div class="mw8 center flex flex-column h-100"> <header class="pa2 pa4-ns bg-dark-blue flex-ns items-center justify-between"> <h1 class="white ma0">AB-mediaQuery</h1> <p class="lightest-blue"> Demonstration page, details on <a class="b link no-underline underline-hover pink" href="https://github.com/lordfpx/AB-mediaQuery">GitHub</a> </p> </header> <main> <div class="pa2 pa4-ns bg-lightest-blue"> <p> AB-mediaQuery is the JavaScript side of CSS Media Queries. It's a very simple, yet convenient tool for your developments. </p> </div> <div class="demo-wrapper pa2 pa4-ns"> <h2 class="dark-pink">Informations</h2> <p>AB-mediaQuery is initilized with:</p> <pre><code class="language-javascript">
AB.plugins.mediaQuery({
bp: {
smallOnly: 'screen and (max-width: 767px)',
mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
medium: 'screen and (min-width: 768px)',
largeOnly: 'screen and (min-width: 1025px) and (max-width: 1280px)',
large: 'screen and (min-width: 1025px)'
}
});
</code></pre> <p>Get current valid break points:</p> <pre><code class="language-javascript">console.log(AB.mediaQuery.current);</code></pre> <p>Condition your JS on break points:</p> <pre><code class="language-javascript">
if (AB.mediaQuery.is('smallOnly')) {
// true if media query is 'screen and (max-width: 767px)'
}
</code></pre> <h2 class="dark-pink">Example</h2> <p>Here are some outputs that can be used on JavaScript side (resize window to see changes). You can also check your browser console:</p> <div class="js-mediaquery"></div> </div> </main> <footer class="pa2 pa4-ns bg-dark-blue"> <p class="lightest-blue tc"> © 2019, Thierry Philippe (<a class="b link pink no-underline underline-hover" href="https://twitter.com/lordfpx">@lordfpx</a>) </p> </footer> </div>
</body></html>