Responsive Font-size as per screen size
Can anyone explain/teach me how do I make my text increase or decrease along with the size of the screen? I read a little about REM, but I didn't get it very well.
Actually, I don't even know if that applies to the case.
4 answers
Automatically with screen size
Access this MDN documentation about CSS media queries. Since it did not detail exactly the cut-off points, it is difficult to give a practical and generic example too much. But the link above explains very well how to do this.
To allow scroll zooming (accessibility)
In a nutshell, one way to do this is to set a base body size only once in px (for example, 16px), and the from there, any change in font or screen size, even the width and height of elements, should be set to em.
This is also a matter of accessibility. Using fixed fonts, especially in older browsers, prevented the person from using the browser's natural augmentation.
The good thing to set in em or another unit that is relative and not fixed, is that when zooming the page it reacts as if the screen size would have a smaller width from the responsible point of view . A person on a computer with a FullHD screen that zooms in a lot will see the site as if they were accessing it from a mobile phone, which is quite interesting compared to simply only increasing the font and the blocks of boxes with fixed size do not increase and get a mess.
Note that some modern browsers may even allow a similar effect when zooming even if the units used are not in em or other relative unit, but some older versions this does not work.
I have two options.
1) you can use a plugin to do this, here is one:
2) you can do this with media queries, where you can define which width will be modified, 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 in 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}
Use font-size: 62.5% no .body then just use the following, for a 16px font, use 1.6 in, for 24px, 2.4 in, etc...