Responsive font-size depending on screen size

Question

Can anyone explain/teach me how to make my text increase or decrease along with the screen dimension? I read a little about REM, but I didn’t quite understand.
I don’t even know if that applies to the case.

Answer 1

Automatically with screen size

Access this documentation from MDN on CSS media queries. Since he did not precisely detail the cut points, it is difficult to give a practical and generic example. But the link above explains very well how to do this.

To allow zooming in with scroll zoom (accessibility)

In a nutshell, one way to do this is to set a body’s base size only once on px (for example, 16px), and from there, any change of font or screen size, even the widths and heights of elements, should be defined in em.

This is also a question of accessibility. Using fixed fonts, especially in older browsers, prevented the person from using the browser’s natural augmentation.

The good to define in em or another unit that is relative and not fixed, is that when increasing the zoom of the page it reacts as if the screen size was smaller by the responsive point of view. A person on a computer with a Fullhd screen that zoom in a lot will see the site as if accessing from a mobile phone, which is very interesting if compared to simply increase the font and the blocks of boxes with fixed size do not increase and become a mess.

Note that some modern browsers may even allow a similar effect by zooming in even if the units used are not in em or other relative drive, but some older versions this does not work.

Answer 2

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 set 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;
    }
}

Answer 3

Just use CSS and it 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}

Answer 4

Use font-size: 62.5% on . body then just use the following, for a 16px font, use 1.6em, for 24px, 2.4em, etc...