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

As with many frameworks, once you "go off the grid" and override the framework's default CSS, things will start to break left and right. Frameworks are inherently rigid. If you were to use Zurb's default H1 style along with their default grid classes, then the web page should display properly on mobile (i.e., responsive).

However, it appears you want very large 6.2em headings, which means the text will have to shrink in order to fit inside a mobile display in portrait mode. Your best bet is to use a responsive text jQuery plugin such as FlowType and FitText. If you want something light-weight, then you can check out my Scalable Text jQuery plugin:

http://thdoan.github.io/scalable-text/

Sample usage:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Answer 2

You can make the font size responsive if defining it in vw (viewport width). However, not all browsers support it. The solution is to use JavaScript to change the base font size depending on the browser width and set all font sizes in %.

Here is an article describing how to make responsive fontsizes: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Answer 3

I saw a great article from CSS-Tricks. It works just fine:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

For example:

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

We can apply the same equation to the line-height property to make it change with the browser as well.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Answer 4

Here is something that worked for me. I only tested it on an iPhone.

Whether you have h1, h2, or p tags put this around your text:

<h1><font size="5">The Text you want to make responsive</font></h1>

This renders a 22pt text on a desktop and it is still readable on the iPhone.

<font size="5"></font>

Answer 5

There are several ways to achieve this.

Use a media query, but it requires font sizes for several breakpoints:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Use dimensions in % or em. Just change the base font size, and everything will change. Unlike the previous one, you could just change the body font and not h1 every time or let the base font size be the default of the device and the rest all in em:

1. “Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc..
2. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

See kyleschaeffer.com/....

CSS 3 supports new dimensions that are relative to the view port. But this doesn't work on Android:

1. 3.2vw = 3.2% of width of viewport
2. 3.2vh = 3.2% of height of viewport
3. 3.2vmin = Smaller of 3.2vw or 3.2vh

4. 3.2vmax = Bigger of 3.2vw or 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

See CSS-Tricks ... and also look at Can I Use...

Answer 6

After many conclusions I ended up with this combination:

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

    h2 {
        font-size: 4.3vw;
    }
}