Design-uri diferite pentru latimi diferite

Devine din ce in ce mai frecvent pentru site-uri web si aplicatii sa ofere diferite design-uri dependente de dimensiunea ferestrei utilizatorului, sau de rezolutie.

Acest lucru poate fi realizat in diverse moduri, de la CSS la solutii JavaScript.
In videoclipul de mai jos, vom invata cat de simplu este de facut acest lucru cu putin jQuery si metoda de redimensionare ().

Sursa videoclipului: http://net.tutsplus.com/
 

 

Prin utilizarea metodei jQuery "resize ()", putem vedea cu usurinta cand utilizatorul schimba latimea ferestrei browser-ului lor.

function checkWindowSize() {  
  
    if ( $(window).width() > 1800 ) {  
        $('body').addClass('large');  
    }  
    else {  
        $('body').removeClass('large');  
    }  
  
}  
  
$(window).resize(checkWindowSize); 

Apoi vom scrie proprietatile dorite in CSS în consecinta.

#container {  
    width: 800px;  
    height: 1000px;  
    background: #e3e3e3;  
    margin: auto;  
}  
  
/* Change container size for larger windows. */  
.large #container {  
    width: 1000px;  
}  
  
#nav {  
  
    width: 100%;  
    height: 100px;  
    border-bottom: 1px solid white;  
    background: #999999;  
  
}  
  
.large #nav {  
    float: left;  
    width: 200px;  
    border-bottom: none;  
    border-right: 1px solid white;  
    height: 1000px;  
}  

Ana A.

0Comentarii la "Design-uri diferite pentru latimi diferite"

Adauga Comentariu

Mesaj

Trimite