Revision: 70030
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2015 07:06 by hansknowyou
Initial Code
/**
* ******************************
* Responsive Font-size & Line-height
* ******************************
*/
var xlarge = 1600;
var small = 768;
//relationship between font-size & line-height
var lhchange = 2;
function fontResize(){
var ww=$(window).width();
if($(window).width()<=small){
/**
* ******************************
* if screen size less then 768px
* use the smallest font size and
* smallest line height
* ******************************
*/
$('.fz-6').css('fontSize',(4)+'px');
$('.fz-9').css('fontSize',(6)+'px');
$('.fz-12').css('fontSize',(8)+'px');
$('.fz-15').css('fontSize',(10)+'px');
$('.fz-18').css('fontSize',(12)+'px');
$('.fz-21').css('fontSize',(14)+'px');
$('.fz-24').css('fontSize',(16)+'px');
$('.fz-30').css('fontSize',(20)+'px');
$('.fz-42').css('fontSize',(28)+'px');
$('.fz-51').css('fontSize',(34)+'px');
$('.fz-60').css('fontSize',(40)+'px');
$('.fz-81').css('fontSize',(54)+'px');
$('.fz-102').css('fontSize',(68)+'px');
$('.fz-6').css('lineHeight',(6+lhchange)+'px');
$('.fz-9').css('lineHeight',(8+lhchange)+'px');
$('.fz-12').css('lineHeight',(10+lhchange)+'px');
$('.fz-15').css('lineHeight',(12+lhchange)+'px');
$('.fz-18').css('lineHeight',(14+lhchange)+'px');
$('.fz-21').css('lineHeight',(16+lhchange)+'px');
$('.fz-24').css('lineHeight',(18+lhchange)+'px');
$('.fz-30').css('lineHeight',(22+lhchange)+'px');
$('.fz-42').css('lineHeight',(30+lhchange)+'px');
$('.fz-51').css('lineHeight',(36+lhchange)+'px');
$('.fz-60').css('lineHeight',(42+lhchange)+'px');
$('.fz-81').css('lineHeight',(56+lhchange)+'px');
$('.fz-102').css('lineHeight',(70+lhchange)+'px');
}
/**
* **********************************
* if screen size larger then 1600 px
* use the largest font size and
* largest line height
* **********************************
*/
else if($(window).width()>xlarge){
$('.fz-6').css('fontSize',(6)+'px');
$('.fz-9').css('fontSize',(9)+'px');
$('.fz-12').css('fontSize',(12)+'px');
$('.fz-15').css('fontSize',(15)+'px');
$('.fz-18').css('fontSize',(18)+'px');
$('.fz-21').css('fontSize',(21)+'px');
$('.fz-24').css('fontSize',(24)+'px');
$('.fz-30').css('fontSize',(30)+'px');
$('.fz-42').css('fontSize',(42)+'px');
$('.fz-51').css('fontSize',(51)+'px');
$('.fz-60').css('fontSize',(60)+'px');
$('.fz-81').css('fontSize',(81)+'px');
$('.fz-102').css('fontSize',(102)+'px');
$('.fz-6').css('lineHeight',(9+lhchange)+'px');
$('.fz-9').css('lineHeight',(12+lhchange)+'px');
$('.fz-12').css('lineHeight',(15+lhchange)+'px');
$('.fz-15').css('lineHeight',(18+lhchange)+'px');
$('.fz-18').css('lineHeight',(21+lhchange)+'px');
$('.fz-21').css('lineHeight',(24+lhchange)+'px');
$('.fz-24').css('lineHeight',(27+lhchange)+'px');
$('.fz-30').css('lineHeight',(33+lhchange)+'px');
$('.fz-42').css('lineHeight',(45+lhchange)+'px');
$('.fz-51').css('lineHeight',(54+lhchange)+'px');
$('.fz-60').css('lineHeight',(63+lhchange)+'px');
$('.fz-81').css('lineHeight',(84+lhchange)+'px');
$('.fz-102').css('lineHeight',(105+lhchange)+'px');
}
/**
* **********************************
* if screen size between:
* 768px and 1600px
* adjust the font-size
* between the max and min font size
* **********************************
*/
else{
$('.fz-6').css('fontSize',(2*((ww-small)/832)+4)+'px');
$('.fz-9').css('fontSize',(3*((ww-small)/832)+6)+'px');
$('.fz-12').css('fontSize',(4*((ww-small)/832)+8)+'px');
$('.fz-15').css('fontSize',(5*((ww-small)/832)+10)+'px');
$('.fz-18').css('fontSize',(6*((ww-small)/832)+12)+'px');
$('.fz-21').css('fontSize',(7*((ww-small)/832)+14)+'px');
$('.fz-24').css('fontSize',(8*((ww-small)/832)+16)+'px');
$('.fz-30').css('fontSize',(10*((ww-small)/832)+20)+'px');
$('.fz-42').css('fontSize',(14*((ww-small)/832)+28)+'px');
$('.fz-51').css('fontSize',(17*((ww-small)/832)+34)+'px');
$('.fz-60').css('fontSize',(20*((ww-small)/832)+40)+'px');
$('.fz-81').css('fontSize',(27*((ww-small)/832)+54)+'px');
$('.fz-102').css('fontSize',(34*((ww-small)/832)+68)+'px');
$('.fz-6').css('lineHeight',(3*((ww-small)/832)+6+lhchange)+'px');
$('.fz-9').css('lineHeight',(4*((ww-small)/832)+8+lhchange)+'px');
$('.fz-12').css('lineHeight',(5*((ww-small)/832)+10+lhchange)+'px');
$('.fz-15').css('lineHeight',(6*((ww-small)/832)+12+lhchange)+'px');
$('.fz-18').css('lineHeight',(7*((ww-small)/832)+14+lhchange)+'px');
$('.fz-21').css('lineHeight',(8*((ww-small)/832)+16+lhchange)+'px');
$('.fz-24').css('lineHeight',(9*((ww-small)/832)+18+lhchange)+'px');
$('.fz-30').css('lineHeight',(11*((ww-small)/832)+22+lhchange)+'px');
$('.fz-42').css('lineHeight',(15*((ww-small)/832)+30+lhchange)+'px');
$('.fz-51').css('lineHeight',(18*((ww-small)/832)+36+lhchange)+'px');
$('.fz-60').css('lineHeight',(21*((ww-small)/832)+42+lhchange)+'px');
$('.fz-81').css('lineHeight',(28*((ww-small)/832)+56+lhchange)+'px');
$('.fz-102').css('lineHeight',(35*((ww-small)/832)+70+lhchange)+'px');
}
}
$(document).ready(function(){
fontResize();
$(window).resize(function(){
fontResize();
});
});
Initial URL
Initial Description
example: 1. put the code on your script 2. <p class="fz-15" >your paragraph</p> * ****************************** * class-----Min-fontsize-----Min-lineheight-----Max-fontsize-----Max-lineheight * * fz-6 ---------- 4 ------------------- 6 ------------------- 6 ------------------- 9 * fz-9 ---------- 6 ------------------- 8 ------------------- 9 ------------------- 12 * fz-12 --------- 8 ------------------- 10 ------------------ 12 ------------------ 15 * * fz-15 --------- 10 ------------------ 12 ------------------ 15 ------------------ 18 * fz-18 --------- 12 ------------------ 14 ------------------ 18 ----------------- 21 * fz-21 --------- 14 ------------------ 16 ------------------ 21 ------------------ 24 * * fz-24 --------- 16 ------------------ 18 ------------------ 24 ------------------ 27 * fz-30 --------- 20 ------------------ 22 ------------------ 30 ------------------ 33 * fz-42 --------- 28 ------------------ 30 ------------------ 42 ------------------ 45 * * fz-51 --------- 34 ------------------ 36 ------------------ 51 ------------------ 54 * fz-60 --------- 40 ------------------ 42 ------------------ 60 ------------------ 63 * fz-81 --------- 54 ------------------ 56 ------------------ 81 ------------------ 84 * * fz-102 -------- 68 ------------------ 70 ------------------ 102 ----------------- 105 * * ******************************
Initial Title
Responsive Font-size & Line-height
Initial Tags
Initial Language
jQuery