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

There are the following ways by which you can achieve this:

1. Use rem for e.g. 2.3 rem
2. Use em for e.g. 2.3em
3. Use % for e.g. 2.3% Moreover, you can use : vh, vw, vmax and vmin.

These units will autoresize depending upon the width and height of the screen.

Answer 2

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.

Media Queries

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Again, from the same W3C document each individual unit can be defined as below:

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

Answer 3

I am afraid there isn't any easy solution with regards to font resizing. You can change the font size using a media query, but technically it will not resize smoothly. For an example, if you use:

@media only screen and (max-width: 320px){font-size: 3em;}

your font-size will be 3em both for a 300 pixels and 200 pixels width. But you need lower font-size for 200px width to make perfect responsive.

So, what is the real solution? There is only one way. You have to create a PNG image (with a transparent background) containing your text. After that you can easily make your image responsive (for example: width:35%; height:28px). By this way your text will be fully responsive with all devices.

Answer 4

The "vw" solution has a problem when going to very small screens. You can set the base size and go up from there with calc():

font-size: calc(16px + 0.4vw);

Answer 5

Try including this on your style sheet:

html {
  font-size: min(max(16px, 4vw), 22px);
}

More info at https://css-tricks.com/simplified-fluid-typography/

Answer 6

I have found this solution, and it works very well for me:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}