CODEWITHSUNDEEP
jqueryhtmljquery-mobilemobile
user694688
user694688

Reputation: 683

Font size based on device width

How should we set the font size based on device width so that mobile site renders fine on all width devices. Am using jquery mobile. Does it take care of this.

Upvotes: 1

Views: 585

Answers (2)

Bobby Fritze
Bobby Fritze

Reputation: 182

Viewport. Writeup by David Storey: https://css-tricks.com/viewport-sized-typography/

Ex:

#box{
  background-color:black;
  width: 100vh;
}


h1.rad {
text-align: center;
vertical-align: middle;
color: #999;
font-family: "Helvetica Neue";
font-size:  3.14159vw;
line-height: 6.66vh;
font-weight: 100;
text-transform: uppercase;
}
<div id="box">
<h1 class="rad">
  Viewport sizing.<br>So rad.
  </h1>
  </div>

Upvotes: 1

mikul
mikul

Reputation: 536

html { font-size: 62.5%; } body { font-size: 1em;}

@media (max-width: 300px) { html { font-size: 70%; } }

@media (min-width: 500px) { html { font-size: 80%; } }

@media (min-width: 700px) { html { font-size: 120%; } }

@media (min-width: 1200px) { html { font-size: 200%; } }

Demo : http://jsfiddle.net/pLyjt/

Upvotes: 0

Related Questions