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

Responsive fonts. 使用纯CSS来自动缩放根元素的字体大小。

html5, 教程, 响应式

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3479
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Generic local styling */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 36rem;
  font-family: sans-serif;
  background-image: url("data:image/svg+xml;utf8,<svg style='opacity:.75' width='1200' height='256' viewBox='0 0 1200 256' xmlns='http://www.w3.org/2000/svg'><defs><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='.4'></feTurbulence></filter></defs><rect height='256' width='1200' filter='url(%23noise)' opacity='0.3'/></svg>");
  background-color: #1a1a1a;
  color: #fff;
}
h1,h2,h3 {
  font-weight:100;
}
h2,h3 {
  margin:3rem 0 1rem;
}
h1{
  font-size: 1.625rem;
  text-align: center;
  margin: 2rem 0 1rem;
}
h2{font-size:1.375rem}
h3{font-size:1.25rem}

nav {
  margin: 2rem auto;
  padding: .25rem;
  background-color: #1a1a1a;
  display:flex;
  justify-content: space-around
}

ul {margin:1rem 0; padding-left:1rem}
li {margin:.75rem 0}
p {margin:1rem 0}

img {
  border: 0 solid;
  vertical-align: baseline;
  max-width: 100%;
}

button {cursor: pointer;}

code, kbd {
  font: 100 1rem monospace, monospace;
  padding: 0.1em .25em;
  background-color: #1a1a1a;
}

/* Links revisited */

a {
  color: #fff;
  padding: 0 1px;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom-color: rgba(255,255,255,.25);
  transition: all .3s ease-out;
}

a:visited {
  color: #eee;
  border-bottom-color: rgba(255,255,255,.5);
}
a:hover,
a:focus,
a:active {
  color: #000;
  background-color: #fff;
  border-bottom-color: #000;
  box-shadow: 0 0 0 .125em #fff;
}
a:focus {
  outline: 0 solid;
}

::-moz-selection {
  background: #bdf;
  color: #000;
}
::selection {
  background: #bdf;
  color: #000;
}

button {
  display: inline-block;
  color: #000;
  background-color: #fff;
  padding: 0 .25em;
  text-align: left;
  vertical-align: bottom;
  font: inherit;
  font-size: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: button;
  overflow: hidden;
  transition: all .3s ease-out;
}
button:hover,
button:focus {
  color: #fff;
  background-color: #000;
}

.report {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: .25rem 1.25rem .25rem .5rem;
  color: #fff;
  background-color: #000;
  max-height: calc(100vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.report_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid currentColor;
}
.report_svg {
  display:block;
  fill: currentColor;
}
.smaller {
  font-size:smaller;
  text-align:center;
  border: 1px solid #777;
  padding:.5rem;
  background-color: #1a1a1a
}

/* Generic styling */

html {
    /* font-size is 100% (16px | 1em) - which is default so unstated */
}
/* Generic styling */

body {
    /* template overrides */
    
    max-width: none;
    padding: 1.618em 0 1rem;
}
h1 {
    margin: 0
}
h2 {
    margin: 2em auto .5em;
    max-width: 35.236em;
}
h3 {
    margin: 0 0 .125em
}
pre {
    color: #ddd;
    background-color: #1a1a1a;
    padding: 0 1rem 1rem;
    overflow-x: scroll;
}
b {
    color: #fff;
    font-weight: 300;
}
.comment {
    color: #9a9a9a;
    font-weight: 100;
}
sup {
    font-size: inherit;
    margin-right: .125em;
}
.content {
    margin: 0 auto;
    max-width: 36rem;
    padding: 0 1rem;
}
.strap {
    font-size: larger
}
[id^="report"] {
    color: #ed0
}
[id="report1"] {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #1a1a1a;
    text-indent: .618rem
}
.smaller {
    margin: 1rem auto;
    max-width: 34rem;
}
/* This example begins from 320px | 20em  to  30px @ 1920px */

@media (min-width: 20rem) {
    :root {
        /* font-size: calc(100% + ((1vw - .2rem) / 1.37142857)); */
    }
}
/* 16px @ 768px  to  32px @ 1920px */

@media (min-width: 48em) {
    :root {
        font-size: calc(100% + ((1vw - .48rem) * 1.389));
        /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
    }
}
/* layout using golden ratio starts at 768px | 48rem */

.flex {
    margin: 1.618rem .618rem;
    color: #fff;
}
/* Do not apply padding or margins to flexed containers */

.flex_m {
    background-color: rgba(255, 160, 255, .3);
}
.flex_l {
    background-color: rgba(85, 160, 255, .3);
}
.flex_c {
    background-color: rgba(160, 255, 85, .3);
}
.flex_r {
    background-color: rgba(255, 85, 160, .3);
}
.flex_txt {
    padding: 1em;
    /* note em */
    
    max-width: 36rem;
    /* for reading length only */
    
    margin: 0 auto;
}
.flex_m {
    text-align: center;
}
@media (max-width: 47.999rem) {
    .flex_m::before {
        content: "Below 48rem viewport width; columns are stacked, font-size at 16px";
        color: #bbb;
        padding: .125rem 0;
        display: inline-block;
    }
}
@media (min-width: 48rem) {
    .flex {
        display: flex;
        margin: 1.618rem 0;
    }
    .flex_m {
        flex: 0.09;
    }
    .flex_l {
        flex: 1.618;
        max-width: 36rem;
        /* note rem */
    }
    .flex_c {
        flex: 0.146;
    }
    .flex_r {
        flex: 1;
        font-size: 0.91rem;
        max-width: 36em;
        /* note em */
    }
}

HTML

<h1><a href="https://websemantics.uk/articles/responsive-fonts/">Responsive fonts - auto-scaling root font-size</a></h1>

<p>The root font size scales up and down proportionately, between defined values, dependent upon the viewport width.</p>

<h2>Easy-peasy, stretch &amp; squeezy.</h2>

<p>In this example the font size is set at 1rem (16px) up to 48rem (768px) viewport width.
        <br> It then starts increasing to meet the upper defined value 2em (32px) at 120rem (1920px) wide.
        <br> All controlled by a single CSS statement.
    </p>

<p>Remember to define all font-sizes in em, rem or percent.</p>

<pre><code class=language-css>
<span class=comment>/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */</span>
@media (min-width: 48rem) {
  :root {
    font-size: calc(100% + ((1vw - .48rem) * 1.389));
    <span class=comment>/* .48rem = viewportWidthMinimum /100 */</span>
    <span class=comment>/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */</span>
  }
}
</code></pre>

<p>Where:</p>

<pre>

<b>fontSizeCalc = 100% + (1vw - 48rem / 100) * 100 * fontSizeDifference / viewportWidthDifference</b>

fontSizeDifference = maxFontSize - minFontSize
                   = 2em - 1em  &equiv;  32px - 16px
                   = 1em  &equiv;  16px

viewportWidthDifference = viewportMax - viewportMin
                        = 120em - 48em  &equiv;  1920px - 768px
                        = 72em  &equiv;  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
</pre>

<p>Font scaling doesn't stop at the top setting but continues to increment at the same rate.
        <br>This behaviour may be stopped, or adjusted further, by adding another media query:</p>

<pre><code class=language-css>
<span class=comment>/* Stop font scaling above 1920px */</span>
@media (min-width: 120em) {
  :root {
    font-size: 2rem;
  }
}
</code></pre>

<p>Tested on Mac so far: Firefox, Safari, Chrome.
        <br> As yet I'm uncertain all browsers convert units in the same manner.
    </p>

<h2>Examples:</h2>

<p>Demo of <a href="https://websemantics.uk/articles/responsive-fonts/demo2/">responsive fonts applied to a typical layout</a>.</p>

<h3 style="margin-top:2rem">Applied to a golden-ratio Flexbox layout</h3>

<p>This method will also scale any object which is sized using em or rem.</p>

</div>

<div class=flex>
    <div class=flex_m></div>
    <div class=flex_l id=test2>
        <div class=flex_txt>
            <h3>@ 48rem<sup>+</sup> (768px<sup>+</sup>)</h3>
            <p>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).</p>
            <div id=report2></div>
        </div>
    </div>
    <div class=flex_c>&nbsp;</div>
    <div class=flex_r id=test3>
        <div class=flex_txt>
            <h3>@ 48rem<sup>+</sup> (768px<sup>+</sup>)</h3>
            <p>This text starts at the minimum font-size 14.55px and scales up to 29.12px as the viewport is stretched to 120rem (1920px).</p>
            <div id=report3></div>
        </div>
    </div>
    <div class=flex_m></div>
</div>

<h3>Why a golden-ratio example?</h3>

<p>It's probably the most difficult fluid grid to achieve with any accuracy.
        <br>The value scale is awkward to say the least:
        <br> [0.09, 0.146, 0.236, 0.382, 0.618, 1, 1.618, 2.618, 4.236, &hellip;]</p>

<p>In the example above @ 48rem<sup>+</sup> (768px<sup>+</sup>) it consistently has:
        <p>
            <ul>
                <li>Left and right margins of 1.618rem (purple).
                    <li>Centre space separator of 2.618rem (green).
                        <li>Left column (blue) is always 1.618 * the width of the right column (red).</li>
                        <li>Right column font-size is set as (1 - 0.09) * 1rem.</li>
                        <li>Padding for each text-area is set at 1em which also scales beautifully.</li>
                        <li>For readability; text widths are limited to 34em.</li>
            </ul>

</div>

<p class=smaller><a href="https://codepen.io/2kool2">Pens by Mike Foskett</a> &mdash; <a href="https://websemantics.uk/">webSemantics</a>
</p>

Responsive fonts. 使用纯CSS来自动缩放根元素的字体大小。

html5, 教程, 响应式

编辑器支持Emmet

快捷键

Responsive fonts. 使用纯CSS来自动缩放根元素的字体大小。

html5, 教程, 响应式

使用CSS vw单位实现的响应式公交车

如何使用纯CSS3实现一个3D商品标签

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：