Media Query în CSS
Un alt element important în construirea designului adaptiv sunt regulile Media Query, care permit definirea stilului în funcție de dimensiunile browserului utilizatorului.
În CSS2 exista deja o soluție sub forma regulii media, care permite specificarea dispozitivului pentru care se folosește stilul respectiv:
<html>
<head>
<title> Pagină web adaptivă </title>
<link media="handheld" rel="stylesheet" href="mobile.css">
<link media="screen" rel="stylesheet" href="desktop.css">
</head>
<body>
......................Regula media="handheld" indică faptul că stilurile din mobile.css vor fi aplicate dispozitivelor mobile, în timp ce regula media="screen" se aplică browserelor desktop.
Totuși, multe browsere mobile moderne consideră implicit că pagina este destinată desktopurilor, astfel încât aplică în orice caz regula media="screen". De aceea, nu ar trebui să ne bazăm pe această soluție.
Pentru a rezolva această problemă, în CSS3 a fost introdus mecanismul CSS3 Media Query. De exemplu, pentru a aplica stilul doar dispozitivelor mobile putem scrie astfel:
<html>
<head>
<title> Pagină web adaptivă </title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="(max-device-width:480px)" href="mobile.css" />
</head>
<body>
................................Valoarea atributului media (max-device-width:480px) ne spune că stilurile din fișierul mobile.css vor fi aplicate acelor dispozitive a căror lățime maximă a ecranului este de 480 de pixeli - adică acestea sunt de fapt dispozitive mobile.
Cu ajutorul cuvântului cheie and putem combina condițiile, de exemplu:
<link rel="stylesheet" type="text/css" media="(min-width:481px) and (max-width:768px)" href="mobile.css" />Acest stil va fi aplicat dacă lățimea browserului se află în intervalul de la 481 la 768 de pixeli.
Cu ajutorul directivei @import putem defini un fișier css și importa în el stiluri pentru anumite dispozitive:
@import url(desktop.css):
@import url(tablet.css) (min-device-width:481px) and (max-device-width:768):
@import url(mobile.css) (max-device-width:480px):De asemenea, putem să nu împărțim stilurile pe fișiere, ci să folosim regulile CSS3 Media Query într-un singur fișier css:
body {
background-color: red;
}
/*Dacă restul stilurilor*/
@media (max-device-width:480px){
body {
background-color: blue;
}
/*Dacă restul stilurilor*/
}Funcții aplicabile în CSS3 Media Query:
- aspect-ratio: raportul dintre lățimea și înălțimea zonei de afișare (browserului)
- device-aspect-ratio: raportul dintre lățimea și înălțimea ecranului dispozitivului
- max-width/min-width și max-height/min-height: lățimea și înălțimea maximă și minimă a zonei de afișare (browserului)
- max-device-width/min-device-width și max-device-height/min-device-height: lățimea și înălțimea maximă și minimă a ecranului dispozitivului mobil
- orientation: orientarea (portret sau peisaj)
De exemplu, putem seta stiluri diferite pentru diferite orientări ale dispozitivelor mobile:
/*Stiluri pentru orientarea portret*/
@media only screen and (orientation: portrait){
}
/*Stiluri pentru orientarea peisaj*/
@media only screen and (orientation: landscape){
}Astfel, schimbăm doar definiția stilurilor în funcție de dispozitiv, iar stilurile css propriu-zise rămân aceleași pe care le folosim pentru crearea site-urilor obișnuite.
De obicei, la definirea stilurilor se acordă prioritate stilurilor pentru cele mai mici ecrane - așa-numitul abordare Mobile First, deși acest lucru nu este obligatoriu. De exemplu, să definim următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Pagină web adaptivă </title>
<style>
body {
background-color: red;
}
/* pentru tablete și phablete */
@media (min-width: 481px) and (max-width:768px) {
body {
background-color: green;
}
}
/* pentru desktopuri */
@media (min-width:769px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h2> Pagină web adaptivă </h2>
</body>
</html>Mai întâi vin stilurile generale, care sunt relevante în primul rând pentru dispozitivele mobile cu ecrane mici. Apoi urmează stilurile pentru dispozitivele cu ecrane de lățime medie: phablete, tablete. Și în continuare vin stilurile pentru desktopuri.
De exemplu, la emularea unui dispozitiv cu lățimea de 375 de pixeli, pagina va avea culoarea roșie:
Iar în browserul unui computer obișnuit, pagina va avea culoarea albastră, așa cum este definit în stiluri:
