Ultimul nostru concept de regulă „Când” poate fi aplicat designului responsiv. Se aplică condițiilor de regulă, cum ar fi un utilizator care are un dispozitiv cu ecran mobil sau încearcă să printeze pagina noastră. Deoarece acestea nu se află în afișajul nostru prestabilit, este posibil să dorim să eliminăm elemente sau să ne modificăm aspectul pentru a accepta un ecran mic sau să eliminăm imaginile și culorile de fundal pentru a face versiunile tipărite mai ușor de citit și mai puțin taxate pentru rezervele de cerneală.
Pentru a face acest lucru din foaia noastră de stil, trebuie să specificăm diferențele dintre selectorii noștri care se aplică acestor cazuri de utilizare. Când dorim să facem modificări de stil în funcție de dispozitivul utilizatorului, cel mai bine este să testăm existența funcției în browser sau pentru o anumită caracteristică sau setare a unui dispozitiv, în loc de numele și versiunea pe care acesta se identifică. De exemplu, dacă luăm în considerare lățimea curentă a browserului, nu contează care este dispozitivul. Un utilizator poate fi pe un desktop, dar are browserul mult mai mic decât ecranul complet. De asemenea, nu dorim să menținem o listă în codul nostru pentru fiecare dimensiune de telefon mobil, mai ales când majoritatea se încadrează într-un interval limitat. Doar verificând dimensiunea, putem clasifica dispozitivul și să-i dăm un aspect cel mai potrivit.
Un alt argument pentru această abordare este modul în care nivelul de suport pentru funcții se schimbă atât pe măsură ce standardele se schimbă, cât și pe măsură ce browserele sunt actualizate. Dacă verificăm doar numele browserului și o versiune mai nouă decât știam care acceptă funcția pe care o dorim, am pierde funcția pe care dorim să o implementăm. În schimb, putem încerca să „încărcăm” unele dintre funcțiile pe care le dorim sau să includem reguli de rezervă (cum am făcut-o în exemplul nostru de gradient) pentru a ne oferi cea mai mare cantitate de suport posibil.
Pentru a testa după caracteristică sau capacitate, folosim funcția de interogare media a CSS. Vom folosi dimensiunea ecranului ca exemplu. Deși nu este o știință perfectă, există aproximativ 4 ecrane de bază de luat în considerare, împreună cu dimensiunile lor medii:
- Telefoane inteligente (portret)—320 pixeli
- Tablete (portret)—768 pixeli
- Tablete (peisaj), netbook-uri—1024 pixeli
- Laptop-uri, desktop-uri — 1024 sau mai mare
Acest lucru nu captează în niciun caz fiecare dispozitiv sau rezoluție posibilă. De exemplu, mini-tabletele (sau tendința de phablet/telefoane mobile supradimensionate) se pot situa în jurul intervalului de 480 de pixeli. Dacă doriți să acceptați diferite aspecte pentru aceste dispozitive, va determina dacă trebuie să luați în considerare mai multă varietate decât lista de mai sus, dar odată ce implementăm funcții mai responsive, veți vedea cum aceste dispozitive vor primi de obicei o experiență de vizionare acceptabilă. În continuare, vom crea secțiuni noi în CSS care definesc modificările necesare pentru acele dimensiuni.
Unele browsere și dispozitive, cum ar fi browserul Apple Safari, vor încerca să încadreze întreaga pagină în ecranul dispozitivului lor, raportând că sunt un dispozitiv de dimensiune completă. Pentru a preveni acest lucru, putem adăuga următoarea metaetichetă la HTML:
<meta name="viewport" content="width=device-width;
initial-scale=1.0">
Această linie îi spune browserului să raporteze lățimea reală a dispozitivului, astfel încât să putem oferi vizualizarea corectă.
În continuare, trebuie să creăm o serie de selectoare care vor testa diferitele noastre scenarii. Folosind interogări media pentru a ne ghida decizia:
@media only screen and (max-width: 959px) {}
// Smaller than desktop/laptop (tablets, netbooks)
@media only screen and (min-width: 768px) and (max-width: 959px) {}
//Portrait or landscape tablets, netbooks
@media only screen and (max-width: 767px) {}
// devices smaller than portrait tablets (mobile)
@media only screen and (min-width: 480px) and (max-width: 767px) {}
// mobile landscape to tablet portrait
@media only screen and (max-width: 479px) {}
// mobile up to landscape mode
Dacă aveți deja scris CSS, puteți adăuga acești selectori sub codul existent. Orice reguli din codul dvs. existent care nu sunt suprascrise de unul dintre acești selectori vor rămâne în uz și devin regulile dvs. de „retractare”. Acesta este motivul pentru care nu am inclus o interogare media pentru dispozitivele de dimensiune completă (deși ați putea, dacă doriți ca un set diferit de reguli să fie returul dvs., să presupunem de exemplu un dispozitiv mai mic în loc de un dispozitiv de dimensiune completă ca stil prestabilit).
În fiecare dintre aceste noi selectoare este locul în care ne-am înlocui stilul „normal” pentru a ne ajusta experiența utilizatorului. Oriunde am folosit div-urile flotante se vor ajusta automat (în containerul lor părinte) pe măsură ce dimensiunea ferestrei se schimbă. Cu aceste selectoare, putem muta alte părți de conținut sau chiar dezactivați unele elemente care sunt greu de manevrat pe dispozitive mai mici. Anunțurile mai mari pot fi prea mari ca dimensiune a ecranului și a fișierului pentru a fi ușor de consumat pe un dispozitiv mobil. Pentru a o dezactiva, adăugăm o regulă la secțiunea media pentru dispozitivele mai mici, care ascunde acel conținut. Imaginați-vă că avem următorul aspect:
Logo | ||
Link 1 | Anunț flash | O reclamă |
Link 2 | Conţinut | Încă un anunț |
Link 3 | ||
Informații de contact |
Acest aspect ar putea fi reprezentat de următoarele HTML și CSS:
<header><img src="ourlogo.png"></header>
<div id="container">
<div id="left">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link
2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>
<div
id="main">
<div id="splash">[flash with id "video"]</div>
<div
id="content">Our text content here</div>
</div>
<div id="right">
<div
class="ad">an ad here</div>
<div class="ad">another ad </div>
</div>
<br style="clear: left;" />
</div>
<footer>Contact Information</footer>
<style>
}
div{
border-style:dashed;
border-width:1px;
}
header{
background:url(ourlogo.png) no-repeat;
background-size:200px 100px;
background-position:center;
height:100px;
}
#left{
min-width:100px;
max-width:150px;
float:left;
}
#main{
float:left;
}
#right{
min-width:100px;
max-width:150px;
float:left;
</style>
Care, la rândul său, ar putea genera ceva de genul acesta odată ce adăugăm conținut real:
Deoarece folosim div-uri flotante, site-ul se va conforma (în cele din urmă) unui format de sus în jos care reține tot conținutul atunci când nu se potrivește pe afișajul în care se află. Asta pentru că flotarea va plasa elementele într-o linie atunci când containerul este suficient de lat pentru a le include. Când conținutul este mai larg decât rândul, acesta este afișat într-o nouă linie. Lățimile maxime și minime vor ajuta să ne asigurăm că conținutul nu este tăiat, dar, deși acest lucru ne ajută în unele cazuri, videoclipul voluminos flash și sigla mare reduc capacitatea utilizatorului de a naviga de pe un dispozitiv mobil. Pentru a adapta acest exemplu pentru utilizatorii de pe ecrane mai mici, dorim să păstrăm tot conținutul pertinent, păstrând în același timp o experiență bună pentru utilizator. Pentru a face acest lucru, vom ascunde videoclipul, vom pune linkurile noastre în partea de sus și vom muta anunțurile în partea de jos, adăugând interogări media în CSS-ul nostru. Vom opta și pentru o versiune mai mică a logo-ului nostru. Deoarece designul nostru actual a fost considerat suficient de flexibil pentru alte dispozitive, vom adăuga doar selectorul CSS pentru ecranele mici:
<header><img src="ourlogo.png"></header>
}
<div id="container">
<div id="left">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link
2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>
<div
id="main">
<div id="splash">[flash width id "video"]</div>
<div
id="content">Our text content here</div>
</div>
<div id="right">
<div
class="ad">an ad here</div>
<div class="ad">another ad </div>
</div>
<br style="clear: left;" />
</div>
<footer>Contact Information</footer>
<style>
div{
border-style:dashed;
border-width: 1px;
}
header{
background:url(ourlogo.png) no-repeat;
background-size:200px
100px;
background-position:center;
height:100px;
}
#left{
min-width:100px;
max-width:150px;
float:left;
}
#main{
float:left;
}
#right{
min-width:100px;
max-width:150px;
float:left;
}
@media only screen and
(max-width: 479px){
video{ display:none; }
#left{
width:100%;
float:none;
}
#main{
width:100%;
float:none;
}
#right{
width:100%;
float:none;
}
#header{
background:url(http://www.vectortemplates.com/raster/batman-logo-big.gif)
no-repeat;
background-size:100px 60px;
background-position:center;
height:100px;
}
</style>
Acum, regulile noastre flotante și min/max vor face tot ce pot până când ecranul dispozitivului este mai mic de 480 de pixeli. În acel moment, stilul nostru special va intra în vigoare pentru dispozitivele mobile, punând div-urile noastre într-un rând vertical, ascunzând și redimensionând conținutul și făcând div-urile la fel de largi ca ecranul. Site-ul nostru, fără a modifica niciun cod HTML, va arăta acum astfel:
De asemenea, putem folosi interogări media pentru a seta stilul atunci când un utilizator ne imprimă pagina, fără a-i cere să facă clic pe un link către o versiune specială (selectarea tipăririi dintr-un meniu al browserului ar declanșa acest stil) utilizând @media print{}
.
Lista completă de opțiuni pentru @media
este următoarea:
Tabel 6 Tipuri de media
Nume | Descriere |
all | Toate dispozitivele. |
aural | Cititoare text-to-speech. |
braille | Dispozitive sensibile la tactil. |
embossed | Imprimare pe imprimante braille. |
handheld | Dispozitive portabile mici. |
Vizualizare tipărire. | |
projection | Slide-uri și prezentări. |
screen | Ecrane de computer (dimensiuni obișnuite și mai mari). |
tty | Terminale de teletip. |
tv | Afișări TV. |
Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu
Lasă un răspuns