A presentation at Webkongress Erlangen in September 2018 in Erlangen, Germany by Gunnar Bittersmann
BeispiEl: info-boxEn codepen.io/gunnarbittersmann/pen/QOxEoW
BeispiEl: termiNkalEnDer codepen.io/gunnarbittersmann/pen/mGVpgw
Schriftgröße: 16px bei 320px Breite, 18px bei 960px Breite
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE body { font-size: 16px } body { font-size: 1em } @media (min-width: 640px) { body { font-size: 17px } } @media (min-width: 40em) { body { font-size: 1.0625em } } @media (min-width: 960px) { body { font-size: 18px } } @media (min-width: 60em) { body { font-size: 1.125em } }
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE f(x) = m x + n Δy 18 − 16 18 − 16 m= = = Δx 960 − 320 640 f(x) = m (x − 320) + 16 18 − 16 18 − 16 18 − 16 f(x) = (x − 320) + 16 = x + 16 − 640 640 2 calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16)
SchriFtgröẞe: 16pX bei 320pX breiTE, 18pX bei 960pX breiTE body { font-size: calc((18 - 16)/640 * 100vw + (16 - (18 - 16)/2) * 1rem/16); } ÜbersChrifT: 26pX bei 320pX breiTE, 36pX bei 960pX breiTE h1 { font-size: calc((36 - 26)/640 * 100vw + (26 - (36 - 26)/2) * 1rem/16); }
body { !--font-size-320: 16; !--font-size-960: 18; font-size: calc((var(!--font-size-960) - var(!--font-size-320))/640 * 100vw + (var(!--font-size-320) - (var(!--font-size-960) - var(!--font-size-320))/2) * 1rem/16); } h1 { !--font-size-320: 26; !--font-size-960: 36; }
body { !--font-size-320: 16; !--font-size-960: 18; } h1 { !--font-size-320: 26; !--font-size-960: 36; } body, h1 { font-size: calc((var(!--font-size-960) - var(!--font-size-320))/640 * 100vw + (var(!--font-size-320) - (var(!--font-size-960) - var(!--font-size-320))/2) * 1rem/16); }
BeispiEl: schRiftgRöße codepen.io/gunnarbittersmann/pen/EebWbd
BeispiEl: bildeRgalErie
a·b=A b a a/b=r a=r·b r·b·b=A b² = A / r b = √A / r a = r · √A / r a = √A · r
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 lim xn = √a n ∞ x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356…
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 lim xn = √a n ∞ x0 = 1 @function sqrt($a) { $x: 1; @for $i from 1 through 3 { x1 = (1 + 2 / 1) / 2 = 1.5 $x: ($x + $a / $x) / 2; x2 = (1.5 + 2 }/ 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… @return $x; } √2 = 1.41421356…
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 lim xn = √a n ∞ x0 = 1 @function sqrt($a) { $x: 1; $x: ($x + $a / $x) / 2; x1 = (1 + 2 / 1) / 2 = 1.5 $x: ($x + $a / $x) / 2; x2 = (1.5 + 2 / 1.5) 2 = 1.41666667 $x: /($x + $a / $x) / 2; x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… @return $x; } √2 = 1.41421356…
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !--area: 0.4; !--a: calc(var(!--area) * var(!--aspect-ratio)); !--x0: !--x1: !--x2: !--x3: 1; calc((var(!--x0) + var(!--a) / var(!--x0)) / 2); calc((var(!--x1) + var(!--a) / var(!--x1)) / 2); calc((var(!--x2) + var(!--a) / var(!--x2)) / 2); width: calc(var(!--x3) * 100%);
Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !--area: 0.4; !--a: calc(var(!--area) * var(!--aspect-ratio)); !--x0: 1; !--x1: calc((var(!--x0) + var(!--a) / var(!--x0)) / 2); !--x2: calc((var(!--x1) + var(!--a) / var(!--x1)) / 2); width: calc(var(!--x2) * 100%);
BeispiEl: bildeRgalErie codepen.io/gunnarbittersmann/pen/mXXYye
<img src="https:!//bittersmann.de/images/65.1057/580.jpg" style="!--aspect-ratio: calc(4/3)" alt=""!/> Das sind keine Inline-Styles. <div class="container"> <div class="row"> <div class="col-12 col-md-8 col-lg-6"> Aber das sind Inline-Styles. 💩
LiebeGerda & LiebedOriS von Ulrike Rausch liebefONts.Com
