Responsive font-size using css/Bootstrap
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;
}
}
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, 2022Comments
-
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 heardvw
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 over 6 yearsuse
css media queries
to define differentfont-size
tobody
at differentscreen break-points
. read more here -
Mohideen bin Mohammed over 6 yearsi 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 onvw
-
-
MFGSparka over 6 yearsOr set a new font size on each viewport.
-
Mohideen bin Mohammed over 6 yearsi 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 over 6 yearswill it scale automatically based on screen resolution? font size should be in specific ratio even resizing