Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1>Přenesení <code>@media</code> pravidel z CSS do JS</h1> <p id="stav"></p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html:before { display: none; content: '{"tablet" : {"min-width" : "40em", "max-width" : "60em"}}'; }
CSS
Autoformát
CSS reset
Až na konci
var MediaQueries = (function () { var mq = {}; var init = function (triggers) { var before = window.getComputedStyle(document.documentElement, ':before'); var content = before.getPropertyValue('content'); // remove first/last ' & unescape " content = content.substring(1, content.length - 1).replace(/\\/g, ''); var createMediaQuery = function (name, params) { var conditions = []; for (var i in params[name]) { conditions.push('(' + i + ':' + params[name][i] + ')'); } mq[name] = window.matchMedia(conditions.join(' and ')); if (typeof triggers[name] == 'function') { var callback = function () { triggers[name]( mq[name].matches ); }; mq[name].addListener(callback); callback(); } }; var queries = JSON.parse(content); for (var query in queries) { createMediaQuery(query, queries); } }; return { init: init }; })(); MediaQueries.init({ 'tablet': function (matched) { stav.innerHTML = matched ? 'Jsem tablet' : 'Nejsem tablet'; } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>