Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

相关标签:

Answer 1

I use these CSS classes, and they make my text fluid on any screen size:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

Answer 2

One way to solve the problem of the text to look good on both desktop and mobile/tablet is in fixing the text size to physical units like physical centimeters or inches, which don't depend on the screen PPI (points per inch).

Based on this answer, below is the code I use at the end of the HTML document for a responsive font size:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

In the code above the items of a different class are assigned font sizes in physical units, as long as the browser/OS is configured correctly for the PPI of its screen.

A physical-unit font is always not too large and not too small, so long as the distance to the screen is usual (book-reading distance).

Answer 3

We can use calc() from css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

The mathematical formula is calc(minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Answer 4

There's another approach to responsive font sizes - using rem units.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Later in media queries, you can adjust all fonts sizes by changing the base font size:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

To make this work in Internet Explorer 7 and Internet Explorer 8 you will have to add a fallback with px units:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

If you're developing with Less, you can create a mixin that will do the math for you.

Rem units support - http://caniuse.com/#feat=rem

Answer 5

A responsive font size can also be done with this JavaScript code called FlowType:

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Responsive web typography at its finest: font-size based on element width.

Or this JavaScript code called FitText:

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.

Answer 6

The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

For my personal project I used vw and @meida. It works perfectly.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}