CODEWITHSUNDEEP
javascriptjquerycsshtmlfonts
Blake Bowman
Blake Bowman

Reputation: 311

Change font size based on window height

Is it possible to change the CSS font-size and line-height of a headline based on the height of the browser window (not the width using media queries)?

Upvotes: 4

Views: 2917

Answers (2)

James Donnelly
James Donnelly

Reputation: 128771

Yes it is. You can do this with CSS alone using the vh (viewport height) unit:

vh unit
Equal to 1% of the height of the initial containing block.

font-size: 1vh;     /* Equal to 1/100th of the viewport height. */
font-size: 50vh;    /* Equal to 1/2 of the viewport height. */
font-size: 100vh;   /* Equal to the viewport height. */

The same applies to line-height:

line-height: 1vh;     /* Equal to 1/100th of the viewport height. */
line-height: 50vh;    /* Equal to 1/2 of the viewport height. */
line-height: 100vh;   /* Equal to the viewport height. */

Demo

html, body, h1 { margin: 0; }

h1 {
  font-size: 50vh;
  line-height: 100vh;
  text-align: center;
}
<h1>Hello, world!</h1>

Upvotes: 7

pumpkinzzz
pumpkinzzz

Reputation: 2967

with jquery:

$('#mySelector').css("font-size", $(window).height()/10);

demo with resize handling: http://jsfiddle.net/scu5Ltfh/

Upvotes: 1

Related Questions