Jquery plugin risoluzione dinamica tramite media queries
Mercoledì, Aprile 30, 2008 15:03 scritto da neryoJquery plugin risoluzione dinamica tramite media queries
Vi voglio segnalare un altro ottimo plugin JQuery, che ritengo molto utile quando si sviluppano siti con layout a dimensioni fisse e con la possibilità di avere diverse risoluzioni a schermo. Questo plugin Jquery implementa funzionalità di media queries, ovvero delle espressioni logiche dichiarate nel media type, che ci consentono di creare una dinamismo nelle nostre pagine in base a dei controlli (min-width e max-width in px), determinando quale css applicare dinamicamente in base alla risuluzione dell’utente. Molto importante ricordare che questo jquery plugin media queries rispetta gli standard W3C ed è compatibile con tutti i browser moderni, ovvero >= IE6.
Lo script come possiamo vedere dall esempio sotto riportato, è molto semplice da utilizzare, come del resto lo sono tutti i Jquery che stò apprezzando e utilizzando sempre di più nei miei siti web. Ecco un esempio di utilizzo:
-
<link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" />
-
<link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1100px)" />
-
<link rel="stylesheet" type="text/css" href="smaller.css" media="only screen and (max-width: 820px)" />
-
-
<script src="jquery.js" type="text/javascript"></script>
-
<script src="jquery.mediaqueries.js" type="text/javascript"></script>
Come possiamo vedere nel codice abbiamo un CSS di default per i media screen e projection al quale vengono aggiunti altri 2 CSS che per la visualizzazione a schermo attraverso i controlli diventano esclusivi.
Sulla pagina ufficiale del plugin è possibile testarne il funzionamento effettuando un resize della pagina notando il cambiamento del colore del box, indice di switching del css.
Riferimenti:
http://www.protofunc.com/scripts/jquery/mediaqueries/
(2 voti, media: 4.5 di 5)
Loading ...
