SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:Media-Query-Und-Font.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
container-type: inline-size;
}
h1 { font-size: 1.2em; }
h2 { font-size: 1.1em; }
input[type=radio]+label {
margin-right: 1em;
}
@media (min-width: 960px) {
#a .media::after { content: "above 960px"; }
}
@media (min-width: 60em) {
#b .media::after { content: "above 60em"; }
}
@media (min-width: 60rem) {
#c .media::after { content: "above 60rem"; }
}
@container (min-width: 960px) {
#a .container::after { content: "above 960px"; }
}
@container (min-width: 60em) {
#b .container::after { content: "above 60em"; }
}
@container (min-width: 60rem) {
#c .container::after { content: "above 60rem"; }
}
</style>
</head>
<body>
<h1>@media / @container font dependency</h1>
<p><label for="vp">Viewportbreite: </label><output id="vp"></output></p>
<p><label for="fs">Fontsize: </label><output id="fs"></output></p>
<p id="fontselector">
<input type="radio" id="font-off" name="fontpos" value="off" checked><label for="font-off">Default-Fontsize</label>
<input type="radio" id="font-html" name="fontpos" value="html"><label for="font-html">font-size:18px auf <html></label>
<input type="radio" id="font-body" name="fontpos" value="body"><label for="font-body">font-size:18px auf <body></label>
</p>
<div id="a">
<h2>(min-width: 960px)</h2>
<p class="media">@media query:</p>
<p class="container">@container query:</p>
</div>
<div id="b">
<h2>(min-width: 60em)</h2>
<p class="media">@media query:</p>
<p class="container">@container query:</p>
</div>
<div id="c">
<h2>(min-width: 60rem)</h2>
<p class="media">@media query:</p>
<p class="container">@container query:</p>
</div>
<script type="module">
const vpOut = document.querySelector("#vp"),
fsOut = document.querySelector("#fs"),
body = document.body,
html = body.parentElement;
function showWidth() {
vpOut.textContent = document.body.parentElement.clientWidth + "px";
}
function showFontsize() {
const htmlSize = window.getComputedStyle(html).fontSize;
const bodySize = window.getComputedStyle(body).fontSize;
fsOut.textContent = "<head>: " + htmlSize + " / <body>: " + bodySize;
}
showWidth();
showFontsize();
window.addEventListener("resize", showWidth);
document
.querySelector("#fontselector")
.addEventListener("input", function(inputEvent) {
switch(inputEvent.target.value) {
case "off":
html.style.removeProperty("font-size");
body.style.removeProperty("font-size");
break;
case "html":
html.style.setProperty("font-size", "18px");
body.style.removeProperty("font-size");
break;
case "body":
html.style.removeProperty("font-size");
body.style.setProperty("font-size", "18px");
break;
}
showFontsize();
})
</script>
</body>
</html>
