CSSの @media を使用せず、clamp() 関数で要素の表示切替をしてみました。
こちらのサイトの条件切替を参考にさせていただきました。
clamp(最小値、推奨値、最大値)となっており、推奨値は最小値と最大値の間にある場合にのみ適用されます。
よって、最小値に0px、最大値に表示したい要素のサイズ、推奨値は切替の為の条件式を記述します。推奨値が適用されるのは最小値と同じ値になったときのみになります。
但し、テキストノード等の子要素を複数含む場合は、それぞれにサイズを設定しなければならないので、@madia を記述する方が楽だと思います。
See the Pen clamp media queries by blue moon (@blue-moon) on CodePen.
.blue {
width: clamp(0px,(100vw - 400px)*1000,300px); /* 0px or 300px */
font-size:clamp(0px,(100vw - 400px)*1000,16px); /* 0px or 16px */
padding:0.5em;
background: #80e4ff;
}端末幅が400未満の時は、推奨値は負の値になるため最小値の0pxが適用されます。
端末幅が400pxの時は、推奨値及び最小値の値はともに0pxとなり、0pxが適用されます。
端末幅が400pxを超える時は、推奨値は1000px以上の大きな値となり、最大値が適用されます。
（よって、最大値に1000px以上の大きな値を設定する時は、推奨値の「*1000」を「*10000」等の大きな数字に変換した方がよいです。）
次は、最大値、つまり表示されるときのサイズも可変する例です。
.pink {
--break: 400px;
/* 端末幅400pxから1200pxの間で、30pxから50pxの間で可変 */
--width: clamp(18.75rem,12.5rem + 25vw,31.25rem);
/* 端末幅400pxから1200pxの間で、14pxから16pxの間で可変 */
--font-size: clamp(0.875rem,0.8125rem + 0.25vw,1rem);
width: clamp(0px,(100vw - var(--break))*1000,var(--width));
font-size:clamp(0px,(100vw - 400px)*1000,var(--font-size));
padding:0.5em;
background: #faa6dc;
}
COMMENT