Responsive font-size according to screen size

Automatically with screen size

Access this documentation from MDN on CSS media queries . Since you did not precisely detail the cut-off points, it is difficult to give a practical, over-generational example. But the link above explains very well how to do that.

To allow zoom scrolling (accessibility)

In a nutshell, one way of doing this is to define a base size of the body only once in px (for example, 16px ), and from there, any and all source changes or screen size, even widgets and element heights, should be set to em .

This is also a matter of affordability. Using fixed fonts, especially in older browsers, prevented the person from using the browser's natural increase.

The good thing about setting% w / o% or another unit that is relative and not fixed is that by zooming the page it reacts as if the screen size were smaller by the viewpoint of the . A person on a computer with a FullHD screen that zoom in a lot will see the site as if it were accessing from a cellphone, which is quite interesting compared to simply just increasing the source and the blocks of boxes with fixed size do not increase and become a mess.

Note that some modern browsers may even have a similar effect when zooming in even though the units used are not in em or other relative drive, but some older versions do not work.

I have two options.

1) You can use a plugin to do this, here is a:

FLOW TYPE

2) You can do this with media queries, where you can define in what width there will be modification, for example:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
    p{
        font-size: 10px;
    }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    p{
        font-size: 12px;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    p{
        font-size: 14px;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    p{
        font-size: 9px;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    p{
        font-size: 7px;
    }
}

Just use CSS that this already solves this way:

@media only screen and (min-width : 1550px)
{ css para este tamanho }

@media only screen and (min-width : 1400px) and (max-width : 1549px)
{ css para este tamanho}