css 最小和最大字体大小与熔化前导之间的流体排版

Posted 2021-05-13

/**
 * Fluid typography between a min & max font-size and molten leading
 * calc(minSize + (maxSize - minSize) * ((100vw - minPort) / (maxPort - minPort)));
 */
:root {
    font-size: 100%;
}

body {
    font-size: 1em;
    line-height: 1.4em;
}

@media screen and (min-width: 20em) {

    body {
        font-size: calc(1em + (1.3125 - 1) * ((100vw - 20em) / (80 - 20)));
        line-height: calc(1.4em + (1.8 - 1.4) * ((100vw - 20em) / (80 - 20)));
    }

}

@media (min-width: 80em) {

    body {
        font-size: 1.3125em;
        line-height: 1.8em;
    }

}