Laboratorul 2. Responsive WEB Design
Reprezintă încadrarea paginii web pe ecrane de diferite dimensiuni. Se poate realiza prin intermediul CSS3 și html5.
Viewport = suprafața de pe un dispozitiv care afișează o pagină web. Se referă doar la conținutul din fereastra bowser-ului, fără bara de unelte, taburi sau altele. Screen size = se referă la ecranul dispozitivului.
Termenul responsive web design este folosit pentru a descrie o serie de tehnici: flexible grid layout, flexible images, and media și media queries; fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, flexible design.
Browserele ne oferă unelte pentru a verifica capacitatea unei pagini web de a-și modifica dimensiunile. În Chrome: resize window; mozila: responsive design mode.
Media queries
este un modul css care ne permite să facem specificații în fișierul css pentru diferite dispozitive.
susține diferite viewports
Sintaxa media query
În head scriem: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Sau se poate scrie în css: @viewport {width: 550px;}. Pentru browserul mozila: @-moz-viewport {width: 550px;}, iar pentru Crome: @-webkit-viewport {width: 550px;}.
În foaia de stil scriem de exemplu:
@media screen and (max-width: 550px) {
body {
background-color: red;
}
h1 {
color: #888888;
}
}
Exercițiu
Notați în indexul site-ului vechi codul de mai jos:
@media screen and (max-width: 768px) {
body {
background-color: green;
}
#content {
width: 768px;
}
#right {
width: 100px;
}
#header,#footer {
width: 300px;
}
#left {
width: 100px;
}
#main {
width: 120px;
}
}
Vizualizați în mozilla în mod responsive. Rezultatul este:
Rezultatul nu este prea bun.
Dacă stabilim în browser width: 768px constatăm că pagina web se încadrează:
Înainte trebuie să corectăm greșelile din codul css - ștergem setarea margin din div-ul main; în html mutăm div-ul left înainte de div-ul main.
Site-ul este:
