Responsive font-size using css/Bootstrap

11,912

Solution 1

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

Solution 2

try to use media queries

@media screen and (max-width: 420px){
   body {
     font-size : 25px;
   }
}

@media screen and (max-width: 320px){
   body {
     font-size : 20px;
   }
}
Share:
11,912
Mohideen bin Mohammed
Author by

Mohideen bin Mohammed

Searching... if about_me == "if i achieve Something": print "Search about Me on google!" else: print "Working hard to be there!" Ranked 50 out of Top 100 users from CHENNAI Still Growing :)

Updated on June 04, 2022

Comments

  • Mohideen bin Mohammed
    Mohideen bin Mohammed over 1 year

    I have created a page . which should be responsive across desktop, mobile and tablet.

    whenever resizing page other than font looks responsive. but font-size remains same in mobile . it occupies major spaces and not user friendly too.

    how to make it responsively?

    my sample css :

    body {
        font-size : 36px;
     }
    

    here i am using px i heard vw will give responsive but i dont know how it works. which is the best font property for this?

    or is there any bootstrap styles available for this?

    • Jyoti Pathania
      Jyoti Pathania over 6 years
      use css media queries to define different font-size to body at different screen break-points. read more here
    • Mohideen bin Mohammed
      Mohideen bin Mohammed over 6 years
      i knew media query but there is even better solution for responsive .... i tried size property vw it works but not exactly ..... i mean font size should be scale based on screen size. for eg: if its site, total width : 100% means font size should for 40%, like wise in mobile device it should .. i need more clarification on vw
  • MFGSparka
    MFGSparka over 6 years
    Or set a new font size on each viewport.
  • Mohideen bin Mohammed
    Mohideen bin Mohammed over 6 years
    i knew media query but there is even better solution for responsive .... i tried size property vw it works but not exactly ..... i mean font size should be scale based on screen size. for eg: if its site, total width : 100% means font size should for 40%, like wise in mobile device it should .. i need more clarification on vw –
  • Mohideen bin Mohammed
    Mohideen bin Mohammed over 6 years
    will it scale automatically based on screen resolution? font size should be in specific ratio even resizing