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
<title>Sdílení breakpointů z CSS do JS</title> <h1> Sdílení breakpointů z CSS do JS </h1> <p> Současná šířka je cca <span id="deviceType"></span>. </p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html:before { display: none; content: "desktop"; } @media (max-width: 70em) { html:before { content: "tablet"; } } @media (max-width: 40em) { html:before { content: "mobile"; } }
CSS
Autoformát
CSS reset
Až na konci
var responsiveDevice = { prevType : null, type : null, mediaChange : function() { console.log("change"); deviceType.innerHTML = responsiveDevice.type; }, setType : function() { var before = window.getComputedStyle(document.documentElement, ':before'); responsiveDevice.type = before.getPropertyValue('content').replace(/['"]/g, ''); if (responsiveDevice.type !== responsiveDevice.prevType) { responsiveDevice.mediaChange(); responsiveDevice.prevType = responsiveDevice.type; } } }; responsiveDevice.setType(); window.addEventListener("resize", responsiveDevice.setType);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>