?? ? ??????? ??? ??? ?? ? CSS calc ()? ?? ?? ??? ??????.

? ??? ?? ???? ?? ? ????.? ???? ??? ??? ???? ?? ?? ??? ?? ?? ???? ???? ???? ???? ????. clamp() ??? CSS ??? ? ????? ??? ?? ?? ???? ? ??? ? ????.

CSS ?? clamp() ? ?????. ??? ?? ??? ??? ??????? ?? ?????. ??? ?? ?????. ? ?? ?? ?????.

 <code>clamp(minimum, preferred, maximum);</code>

???? ?? ????? ?? ??? (???? ?? ?) ?? ? (?? ?? ?? ?)?? ?? ?? ???? ?????.

??? ??? ?? ???? ?? ???? ?? ? ???? ???? ???? ???? ?? ???? ????? ??, ??? ?? ?? ???? ?? ?? ??? ???????.

 <code>.banner { width: clamp(200px, 50% 20px, 800px); /* 是的，您可以在clamp() 中進(jìn)行數(shù)學(xué)運(yùn)算！*/ }</code>

??? ??? 360px ??? ? ??? ?? ?? ??? 1 REM?? ???? ??? ??? 840px ??? ?? ?? ?? ??? 3.5 REM??? ?? ? ???.

?? ???:

 <code>1rem  = 360px 及以下縮放= 361px - 839px 3.5rem = 840px 及以上</code>

361?? 839 ?? ??? ?? ??? ???? 1REM? 3.5REM ??? ?? ????? ??? ?? ??? ?????. clamp() ???? ?? ??? ?? ???? ! ?? ??, ??? ??? 600 ?? (360 ~ 840 ??)?? 1REM? 3.5REM, ? 2.25REM ??? ?? ?? ?????.

clamp() ? ????? ??? ?? ?? ??????. ? ??? ??? ??? ?? ??? ????.

??? ??? ???? 4 ?? ?????.

1 ??

?? ? ?? ?? ??? ?? ? ?? ??? ??? ??????. ? ???? ?? ??? 1REM ? 3.5REM?? ??? 360px ? 840px???.

2 ??

?? REM?? ?????. ???? ????? 1REM? ????? 16px??? (??? ??? ??) ?????. ??? ?? ? ?? ??? ??? ?? 22.5 rem ? 52.5 rem???.

3 ??

??? ??? ?? ??? ?? ?? ? ????. ???? ??? ??? ?? ??? X ? Y ?? ????? ? ?? ?? ?? ??? ??? ??? ?????.

???? ??? ?????. ? ?????, ??? ???? y ??? ???? ?????. ?? ??? ??? ????.

 <code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope minFontSize</code>

?? ?? ??? ?? ?? 0.0833?? y ? ?? ? -0.875? ?????.

4 ??

?? ??? clamp() ??? ?????. ???? ?? ??? ??? ????.

 <code>preferredValue = yAxisIntersection[rem] (slope * 100)[vw]</code>

??? ??? ??? ?? ????.

 <code>.header { font-size: clamp(1rem, -0.875rem 8.333vw, 3.5rem); }</code>

?? ???? ??? ??? ? ? ????.

?? ?? ???????. ?????, ??? ??? 840px ? ?? ?? ??? ???? ??? ??? 360px ? ?? ?? ??? ?? ???. ???? ???? ???? ? ??? ?? ?.

???? ?? ?? ??? ???? ???????

? ?????? ?? ??? ???? ????. ?? ?? ??? ???? ? (?? ???? 16px)???? ??? ????.

??? ??? ?? ?? ???? ???? ??? ?? 360px? 840px? 16?? ??? rem ??? ?????. ???? ?? 16px ?? 18px? ?? ?? ?? ?? ??? ??? ???? ??? ???? ???? ???? ??? ?? ???? ????.

???? ???? ? ?? ?? ? ????. (1) ?????? ? ? ???? ??? ??? ???? (2) ?? ?? ??? ?? ??? ?? (3) ?? ??? ???? ?? ?? ?? ?????.

??? ??? ???? ? ??? ?? ???? ?????.

 // ???? ??? ??? rem ?? ??? ???? ?? ??? ????? (Minwidthpx, maxWidthpx, minfontsize, maxfontsize) {
  const root = document.querySelector ( "html");
  const pixelsperrem = number (getComputedStyle (root) .fontsize.slice (0, -2));

  const minwidth = minwidthpx / pixelsperrem;
  const maxwidth = maxwidthpx / pixelsperrem;

  const slope = (maxfontsize -minfontsize) / (maxwidth -minwidth);
  const yaxisintersection = -minwidth * slope minfontsize;

  `??? ($ {minfontsize} rem, $ {yaxisintersection} rem $ {slope * 100} vw, $ {maxfontsize} rem)`;
}

// ClampBuilder (360, 840, 1, 3.5) -> "Clamp (1rem, -0.875rem 8.333vw, 3.5rem)"

??? ??? ???? ???? ??? ?? CSS, CSS-in-JS ????? ?? ?? ?? ????? ??? ?? ?? ? ???? CSS? ???? ??? ????? ??????. ?? ?? ?? ??? ?? ?? ???? ???? ???? ???????. setInterval ???? 1 ?? ??? ? ??? ?? ??? ??? ? ? ????.

??? ??? ? ??? ?????. ????? ?? ??? ??? ??? ?? ??? ? ???? ?? ? ?? ? ?? ??? ?????. ??? ??? ? ???? ??? ? ??? ???? ???? ??? ??? ?????.

??? ? ??? ?? ?? ?? ?????

???? : ? ??? ?? ?? ? ?? ???? ?? ? ???? ??? ???????. ??? ????? ?? ??? ???? ? ????? ???? ?? ??? ??? ?? ??????? ???? ?? ?? ??? ??? ??????.

??? ? ??? ??? ??

?????? ??? ?? ??? ??? ?? ???? ?? ??? ???? ? ??? ???? ?? ?? ?? ?? ??? ?? ? ? ????.

??? ???? ???? ?????.

??? ?? ??? ??? ?? ??? ???? ??? ?? ?? ??? ? ???, ?? ??? ??? ???? ?? ?? ??? ?? ?? ? ? ????.

???? ????????? ??, ?? ??? ??? ??? ??? ???? ????????. ? ???? 1REM?? 320px?? 960px?? 3REM?? 3REM? ?????.

 <code>320 / 1 = 320 960 / 3 = 320</code>

??? ??? clampBuilder() ??? ???? ??????.

 const text = document.querySelector ( "P");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);

??? ?? ? ?? ??? ?????. ?? ?? ??? ???? ??? ???? ??? ?? ?? ??? ? ??? ???? ? ??? ??? ??? ??????? ?????. ??? ??? ???? ??? ??? ? ????, ??? ????? ? ?? ??? ?????.

?? ??? ?? ??? ?? ????? ???? ?? ??? CSS ??? (CH) ????? ??? ??????. CH ??? ?? ???? ??? "0"? ??? ?????. ??? ??? ??? width: 100% ???? ?? ??? width: Xch ???? ????? ?? ??? ????.

X? ???? ??? ??? 320px ? ? ?? ??? ?? 320px? ?? ???? ??? CH ??? ???????. ? ?? 1 rem???.

???? ????. ??? CH ??? ???? ?? ? ??? ????.

 // ??? ?? ???? ??? "0"glyph (??)? ??? ?????.
?? calculatech (??, fontsize) {
  const zero = document.createelement ( "span");
  Zero.innerText = "0";
  Zero.style.position = "??";
  Zero.style.fontsize = fontsize;

  ??. AppendChild (0);
  const chpixels = Zero.getBoundingClientRect (). ??;
  ?? .removeChild (0);

  ?? chpixels;
}

?? ??? ???? ??? ?? ??? ? ????.

 ?? calculatech (??, fontsize) {...}

const text = document.querySelector ( "P");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);
text.style.width =`$ {320 / calculatech (text, "1rem")} ch`;

??, ??. ?? ?? ??????. ??? ???? ??? ?? ??? ??? ????!

??? 320px? ?? ??? ? ?, ??? ?? ??? ?? ???? ???? ??? ?? ????? ????. ??? ???? ??? ?? ??? ??? ??? ??? ??? ???? ???? ???????.

???? ?? ??? ??? ??? ???? ?? ?? ?? ???? ?? ??? ?????? ??? CSS VW ?? ??? ? ????. clamp() ?? VW? ???? ?? ??? ???? ????. VW?? ?? ??? ?? ??? ?????? ??? ?? ??? ??? ??? ?? ?? ???? ????. ? ??? ???? ?? ??? ??? ???? ??? ??? ???????.

??? ??? ????????? ??? ? ? :

 text.style.width =`$ {320 / calculatech (text, "1rem")} ch`;

… ??? 1. 0.9 ???? ??? ??? ?? ? ????. ??? ??? ? ????. ??? ???? ??? ??? ??? 90%? ? ???, ?? ??? ?? ??? ?? ??? ????? ??? ??? ?????. ?? ??? ???? ?? ? ???? (? : 0.6).

 ?? calculatech (??, fontsize) {...}

const text = document.querySelector ( "P");
text.style.fontsize = ClampBuilder (20, 960, 1, 3);
text.style.width =`$ {320 / calculatech (text, "1rem") * 0.9} ch`;

??? ?? ???? ?? 320?? ? ??? ?? ??? ????.

 text.style.width =`$ {(320-30) / calculatech (text, "1rem")} ch`;

?? ???? ? ????? ??? ?? ?? ??? ????? ????! 320?? ?? ??? ? ?? ??? ???? ?????.

???? ??? ?? ??? ??? ?????????. ? ?? ?? ???? ???? ?? ??? ??? ?????????? ????. ??? ???? ??? ????? ??, ?? ??? ???? ??? ??? ?? ?? ??? ????. font-family: sans-serif ?? ?????? ??? ??? ???? ?? ????? ????. sans-serif Chrome?? Windows ? Arial? ????? Android ? Chrome? Roboto? ?????. ?? ?? ??? ??? ?? ?? ???? ?????? ? ??? ??? ? ????. Monowidth Fonts? ??? ??? ?? ??? ????. ??? ??? ???? ??????.

?? ?? ??? ??? ?? ??? ??????.

????? ??? ???

??? ???? ? ?? ??? ??? ?? ????? ?? ??? ??? ???? ????. ??? ???? width: 100% . ?? ? ??? ?? ?? ?? ?? ???? ????? ??? ???? ??? ??? ???? ????.

?? ???? ?? ??? ?? ? ?? ?? ? ??? ???? ?? ??? ??? ??? ???? ?? ???? ???? ??? ????? ????. ?? ?? ??? ??? ??? ?? ?? ??? ?? ??? ?? ???? ?? ?? ??? EM ??? ???? ????? ????? ?? ??? ??? ????.

??? ?? ???? ?? ?? ? ???? ?? ??? ??? ??? ??? ?????!

??

????, ?? ?? ???? ??? ?? ?? ??? ????? ?? ?? ??? ??????.

? ??? ???? ?? ?? ??? ??? ? ??? clamp() ??? ???? ?? ???? ???? ??? ??? ??? ??????.

? ??? ??? ?? ??? ?? clamp() ???? ????,? ??? ??? ???? ?? ??? CSS ??? ?? ? ? ????. ?, ?? ??? ???? ??? ???? ??? ??? ?? ????. ?? ?, ?? font-size: 1rem ? ?????. ??? ? ??? ?? ???? ?? ? ??? ?? ??? ????.

?????, ?? clamp() ? CSS?? ?? ?? ? ? ???? ?? ???, ???? ?? ? ?? ????? ???? ??? ? ??? ??? ? ????!

? ??? ???? ???? CSS Clamp ()? ?? ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!