html字体大小vw,如何使用CSS vw尺寸单位实现响应式字体

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