HTML
导入代码模板：
Responsive fonts - auto-scaling root font-size
The root font size scales up and down proportionately, between defined values, dependent upon the viewport width.
Easy-peasy, stretch & squeezy.
In this example the font size is set at 1rem (16px) up to 48rem (768px) viewport width.
It then starts increasing to meet the upper defined value 2em (32px) at 120rem (1920px) wide.
All controlled by a single CSS statement.
Remember to define all font-sizes in em, rem or percent.
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem) {
:root {
font-size: calc(100% + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
Where:
fontSizeCalc = 100% + (1vw - 48rem / 100) * 100 * fontSizeDifference / viewportWidthDifference
fontSizeDifference = maxFontSize - minFontSize
= 2em - 1em ≡ 32px - 16px
= 1em ≡ 16px
viewportWidthDifference = viewportMax - viewportMin
= 120em - 48em ≡ 1920px - 768px
= 72em ≡ 1152px
Using pixels:
fontSizeCalc = 100% + (1vw - 768px / 100) * 100 * 16px / 1152px
= 100% + (1vw - 7.68px) * 1.389
Using em or rem:
fontSizeCalc = 100% + (1vw - 48rem / 100) * 100 * 1em / 72em
= 100% + (1vw - .48rem) * 1.389
Font scaling doesn't stop at the top setting but continues to increment at the same rate.
This behaviour may be stopped, or adjusted further, by adding another media query:
/* Stop font scaling above 1920px */
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}
Tested on Mac so far: Firefox, Safari, Chrome.
As yet I'm uncertain all browsers convert units in the same manner.
Examples:
Demo of responsive fonts applied to a typical layout.
Applied to a golden-ratio Flexbox layout
This method will also scale any object which is sized using em or rem.
@ 48rem+ (768px+)
This text begins to scale-up starting at the minimum font-size 16px and proportionately increasing to 32px as the viewport is stretched to 120rem (1920px).
@ 48rem+ (768px+)
This text starts at the minimum font-size 14.55px and scales up to 29.12px as the viewport is stretched to 120rem (1920px).
Why a golden-ratio example?
It's probably the most difficult fluid grid to achieve with any accuracy.
The value scale is awkward to say the least:
[0.09, 0.146, 0.236, 0.382, 0.618, 1, 1.618, 2.618, 4.236, …]
In the example above @ 48rem+ (768px+) it consistently has:
Left and right margins of 1.618rem (purple).Centre space separator of 2.618rem (green).Left column (blue) is always 1.618 * the width of the right column (red).Right column font-size is set as (1 - 0.09) * 1rem.Padding for each text-area is set at 1em which also scales beautifully.For readability; text widths are limited to 34em.
Pens by Mike Foskett — webSemantics
