Our physical 45 environment (CSS4/HTML5) is
:root --font-size: 16px; --font-size: clamp(16px, 1rem, 2vw); min-width: initial /*ie/or 450px*/, and
@media screen and (min-width:450px) { body { font-size: clamp(16px, 2rem, 4vw); }}.
When viewport width is 450px, the variable --fontsize value of paragraph element text is (clamp 1rem, 2vw) or 16px.
When viewport width is 900px, the variable --fontsize value of paragraph element text is (clamp 2rem, 4vw) or 32px.
Other text elements display related font style sizes. 16px is the minimum paragraph font-size. 32px is the maximum paragraph font-size.
Further, When @media viewport is greater than 900px (2 times the related :root 1rem average clamped font size), that largest 32px paragraph clamped font-size is fixed and will not increase when the :root boundary browser window width increases. Similarly, the minimum 16px paragraph font-size is maintained. This means that 2 isolated static font sizes encompass fluid browser text for browser widths from 450px to 900px.
However, the h5 element body font-size: --fontsize: 16px and h5 font-size: var(--fontsize) to lock h5 text to 16px, with a page-width blue underline. The h5 text is contained by the parent :root element with font-size values 16px or 1rem and excluding 32px or 2rem. Thus, h5 represents a special text, such as a technical help chapter seperator.
Note that font-size: clamp() is required for the :root and @media CSS values.
:root {
--fontsize: 16px;
--font-size: calc(16px, 1rem, 2vw);
min-width: 450px }
@media screen and (min-width: 900px) {
body {
font-size: clamp(16px, 2rem, 4vw);
}
The maximum default font size with browser width under 450px+ is 16px.
The maximum default font size with browser width over 900px+ is 32px.
The h5 element, "Lorem Ipsum" is always 16px. The h5 16px text can be used beside both 1rem and 2rem text.
Note also that there is no CSS element designed to apply precise linear scaling for fluid font size only between 2 fixed font sizes: namely, between 450px and 900px. Otherwise, maintaining a static smaller and static larger fontsize, that is static transient font-size can be attempted using a :root/@media hack. Separated by the (say) 450-to-900 point 'normal' fluid range.
Such static transient technology is not directly provided by CSS3 HTML5, nor by related document editing software. Perhaps the subsequent 56 technology will replace today's 45 technology with the required CSS value stepping required to build our static transient typology. For now we must awkwardly clamp static transient :root and body values.
Resize this browser window to see the effect. This page, inspired by
1. MDN web docs, Using CSS custom properties (variables),
2. CSS Using Variables in Media Queries (Try It, example 2),
3. CSS Clamp(): The Responsive Combination We’ve All Been Waiting For,
4. Linearly Scale font-size with CSS clamp() Based on the Viewport.
So, the trick that we perform here is to twice associate the browser with 450px stepping, say across horizontal/vertical iPhone flips for 45 (CSS4 and HTML5) and 56 technologies.
First, :root clamp() element, :root --font-size: clamp(16px, 1rem, 2vw). Clamping that minimum 16px fontsize to the native :root element with that nominal 450px media width.
Second, @media clamp () element, @media screen and (min-width:450px) { body { font-size: clamp(16px, 2rem, 4vw); }}. We reassociate the same page with a media query.
Together, :root and @media establish the static transient font-size schema. Expressing fluidly from 450px out to 900px (an additional 450px) media width font-size stepping. What does static transient page structure look like?
The static transient 'neglected press' gets crisp horizontal/vertical balance delivered as iPhone direct application! How will Apple iterate this static transient balance with CSS5/HTML6?
Perhaps, a new CSS element foundation with 56 layout boundaries in all CSS 5 selectors? We do require new layout and behavior values for pending CSS5 elements.
Hopefully, we will engage new static transient structure coded into new 56-like CSS element innovation: native 56 element behavior replacing the cumbersome :root @media extension hack.
For example, how do we instantly create this static transient 3 text columns layout with TextEdit, Write, BBedit, WordPerfect, VisualStudio, Notepad, Dreamweaver and so on? For now, without an expensive word processor, dream on.
Certainly, with the code and references provided here, there is much room for improvement as structured 56 media queries' responsive static transient combination.