Resize the font we use

Styling (CSS)
1

how can i resize the fonts when i resize the page from normal display pc to mobile friendly iphone or other

note : just i want to resize the fonts

2

You can either use a media query, like this…

@media screen and (max-width: 460px) {
 .body {
    font-size: 16px;
  }
}

This would make the font size 16 pixels on any screen size up to and including 460 pixels in width, while on any screen above 460 pixels wide, the font size would be whatever is specified for the body earlier in the style sheet. You can use multiple media queries to set font sizes for all different screen sizes (ex. mobile phones, tablets, laptops, desktops, etc.)

If you prefer not to use so many media queries, you can also use one of the relative lengths that CSS recognizes. For example, viewport width (vw)
Example…

h1 {
    font-size: 2vw;
}

This would make the font change dynamically according to the width of the screen. The smaller the screen, the smaller the font would get. But since there is no CSS rule for minimum font size, you may be forced to use a media query, or use the calc command, which is discussed in this article…

3 Likes