Return to Snippet

Revision: 70030
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:&nbsp;&nbsp;&nbsp;
1.   put the code on your script&nbsp;&nbsp;&nbsp;
2.  &lt;p class="fz-15" &gt;your paragraph&lt;/p&gt;
 
* ******************************
 * 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