Ati dorit vreodata sa puteti sa creati fisierele voastre CSS pentru anumite rezolutii?
Sa zicem ca mare parte din vizitatori site-ului vostru au monitoare cu rezolutia 1280 x 1024 dar mai aveti si un numar semnificativ de utiizatori care folosesc 1024 x 768 sau orice alta rezolutie.
Cei mai multi web designeri isi optimizeaza layout-ul site-ului pentru rezolutia mai mica ce mare nefiind o problema, rezolutia monitorului fiind mai mare nu va aparea probelma scroll-ului orizontal.
Daca doriti ca toti vizitatori vostri sa beneficieze de un layout cat mai optimizat pentru monitoarele lor putieti foarte usor sa detectati rezolutia monitorului pe care acestia il folosesc si sa aplicati un CSS diferit in functie de rezolutia folosita.
Primul pas pentru a detecta rezolutia este incarcarea fisierului CSS, a librariei jQuery si a java scriptului care va detecta rezolutia.
Introduceti intre tag-urile <head></head> urmatorul cod:
<link rel="stylesheet" type="text/css" href="rezolutie1280.css"/>
<link rel="stylesheet" type="text/css" href="rezolutie1024.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rezolutie.js"></script>si intre tag-urile <body></body>
<div>Acest text isi va schimba culoarea!</div>Cu ajutorul javascript-ului de mai sus broswer-ul va detecta rezolutia monitorului si va aplica fisierul CSS de care este nevoie.
Creati acum cele doua fiesiere CSS “rezolutie1280.css” si “rezolutie1024.css” si definiti doua stiluri diferite pentru fiecare rezolutie in parte si introducetile pe fiecare in fisierului lui:
div{
color: #006699;
font: 24px Georgia, serif;
} /*pentru 1280*/div{
color: #df0000;
font: 24px "Trebuchet MS", sans-serif;
} /*pentru 1024/*Creati un alt fisier javascript “rezolutie.js” in care se va introduce urmatorul cod :
jQuery(document).ready(function() {
if ((screen.width>=1280) && (screen.height>=1024))
{
alert('Rezolutie monitor: 1280x1024 sau mai mare');
//linia anterioara se poate sterge sau comenta dupa teste
jQuery("link[rel=stylesheet]:not(:first)").attr({href : "rezolutie1280.css"});
}
else
{
alert('Rezolutie monitor: mai mica de 1280x1024, 1024x768 sau mai mica!');
//linia anterioara se poate sterge sau comenta dupa teste
jQuery("link[rel=stylesheet]:not(:first)").attr({href : "rezolutie1024.css"});
}
});Acum ca aveti cele de mai sus creati un folder si puneti toate fisierele in el pentru a putea testa daca functioneaza!
Comentarii recente