CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfonts
Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20206

Responsive font-size using css/Bootstrap

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?

Upvotes: 1

Views: 12755

Answers (4)

AlexG
AlexG

Reputation: 5929

I haven't used this yet but you should be able to use percentages, give your body your "base-font-size", and work with percentages from there.

html, body {
  font-size: 14px;
}

.some-element {
  font-size: 120%;
}

Another option would be working with REM

Upvotes: 1

Daniel Taub
Daniel Taub

Reputation: 5399

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

Upvotes: 2

PenAndPapers
PenAndPapers

Reputation: 2108

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

Upvotes: 2

Gerard
Gerard

Reputation: 15796

Use a different unit of measure:

body {
  font-size : 2em;
}

Upvotes: 1

Related Questions