Piu C7

https://www.w3schools.com/css/css_rwd_grid.
asp
1.RWD - VIEWPORT
Viewport-ul este zona pe care o vede un utilizator dintr-o pagină web pe ecran. Viewport-ul
variază în funcție de device fiind mai mic în cazul unui telefon mobil și mai mare pentru
ecranul unui calculator
Odată cu utilizarea tabletelor si telefoanelor mobile paginile web de mărime fixă au fost prea
mari ca să încapă în viewport.
Pentru a înlătura acest inconvenient browser-ele scalează întregul conținut în jos astfel încât
tot conținutul să încapă pe ecranul de dimensiuni mai mici.
HTML5 introduce o metodă ce permite designerilor să controleze viewport-ul & anume

marcatorul <meta> . În toate paginile web trebuie inclus marcatorul <meta> pentru
elementul viewport astfel:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un <meta> element viewport dă instrucțiuni browser-ului de modul în care să controleze

dimensiunea paginii și scalarea.
width=device-width – specifică lățimea paginii care trebuie să urmeze lățimea ecranului

device-ului.
initial-scale=1.0 – setează valoare inițială a nivelului de zoom când pagina este încărcată
prima dată de browser.
2. RWD – GRID VIEW / griduri fluide
Multe pagini web se bazează pe grid-uri ceea ce implică împărțirea paginii în coloane.
Utilizarea grid-urilor ușurează proiectarea paginilor web prin faptul că face mai usoară
plasarea elementelor în pagină.
Utilizarea grid-urilor responsive / griduri fluide implică existenta a 12 coloane cu o lătime

totală de 100 % care se micșorează sau se măresc în momentul modificării dimensiunii
ferestrei de browser.
Modalitate de construire grid-uri fluide:
Primul pas - ne asigurăm că toate elementele au proprietatea box-sizing setată la border-box

care să asigure faptul că atât padding-ul cât și border-ul sunt incluse în lățimea și înalțimea
totală a elementului.
Adaugați următorul cod în CSS

* {
box-sizing: border-box;
}
Exemplul de mai jos arată o pagină responsive cu 2 coloane una de 25% si cealaltă de 75%.
Exemplu
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Exemplul de mai sus este valid în cazul în care pagina web conține doar două coloane.
Dacă dorim să avem grid-uri fluide cu 12 coloane ca să controlăm mai bine pagina web
fiecare coloană va avea un procentaj de 100% / 12 columns = 8.33%.
Vom crea câte o clasă pentru fiecare dintre cele 12 coloane class=”col-” și un număr care
definește numărul de coloane peste care se întinde secțiunea.
CSS
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Toate aceste coloane trebuie să aibă opțiunea float:left și un padding de 15 px.
CSS
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Fiecare rând va fi inclus într-un <div>. Numărul de coloane dintr-un rând poate crește până la
maxim 12.
HTML
<div class="row">
<div class="col-3">...</div> 
<div class="col-9">...</div> 
</div>
Toate coloanele dintr-un rând au opțiunea float left și vor fi scoase în afara flow-ului paginii
astfel încât alte elemente le vor lua locul ca si cum coloanele nu ar exista. Pentru a preveni
acest lucru putem adăuga un stil care să anuleze acest flow.
CSS
.row::after {
content: "";
clear: both;
display: table;
}
Putem adăuga stiluri și culori pentru a arăta mai bine:
exemplu
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
}
EXEMPLU !!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be
divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
3.RWD – MEDIA QUERIES / Interogari media
Media query este o tehnică CSS introdusă în CSS3 care utilizează @media pentru a insera un
bloc de proprietăți CSS care să fie executate doar în cazul în care anumite condiții sunt
îndeplinite.
Exemplu – dacă fereastra de browser este mai mică sau egală cu 600 px culoarea de
background se va modifica în albastru deschis.
@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}
Folosind media queries putem defini diverse puncte în funcție de dimensiunea ecranului de la
care design-ul sa se comporte diferit.
Se poate adăuga/utiliza un breakpoint la 768 px, astfel încât atunci când ecranul/fereastra de
browser devine mai mică de 768 px fiecare coloană să aibă lățimea de 100%.
Exemplu
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Design mobile first – înseamnă proiectarea interfeței pentru mobil înainte de a proiecta
interfața pentru desktop sau orice alt dispozitiv. Avantajul acestui mod de proiectare este
faptul că pagina se va afișa mai repede pe echipamentele mai mici.
În acest caz trebuie sa modificăm un pic fisierul CSS. Astfel în loc să modificăm stilul în
momentul în care lățimea devine mai mică de 768px vom modifica design-ul în momentul în
care lățimea devine mai mare de 768px.
EXEMPLU

[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Putem adăuga oricât de multe puncte de breakpoint dorim. În exemplul de mai jos se adaugă
un nou breakpoint pentru tableta. Acest lucru se va realiza prin adăugarea unui nou media
query la 600px și se va adăuga un nou set de clase pentru dispozitive mai mari de 600 px dar
mai mici de 768px.
Exemplu – Se definesc două seturi de clase aproape identice singura diferență fiind numele
col- și col-s-.

[class*="col-"] {
width: 100%;
}
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Chiar dacă pare ciudat în acest mod de definire HTML poate decide ce să se întâmple cu
coloanele la momentul în care se ajunge la breakpoint.
HTML exemplu
 Pentru desktop prima și a 3-a sectiune se vor extinde fiecare peste 3 coloane iar
sectiunea din mijloc peste 6 coloane.
 Pentru tableta – prima secțiune se va extinde peste 3 coloane a doua secțiune peste 9
coloane iar secțiunea a 3-a se va afișa sub cele 2 secțiuni și se va extinde peste 12
coloane.
<div class="row">
<div class="col-3 col-s-3">...</div>
</div>
Deoarece există diverse dispozitive cu lungimi și lățimi diferite este destul de greu să definim
breakpoint-uri exacte pentru fiecare dispozitiv. Pentru a fi mai simplu putem defini 5 grupuri
majore.
/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */

/* Large devices (laptops/desktops, 992px and up) */

/* Extra large devices (large laptops and desktops, 1200px and up) */
Putem utiliza media-queris pentru a modifica layout-ul paginii în funcție de orientarea

browser-ului. Se poate utiliza proprietatea CSS care se aplică în cazul în care fereastra de
browser are lățimea mai mare decât înălțimea, e vorba despre landscape orientation.
@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}
Un alt mod de a utiliza media-queries este ascunderea/dispariția unor elemente pentru diverse
dimensiuni de ecran.
/* If the screen size is 600px wide or less, hide the element */

div.example {
display: none;
}
}
Media query poate fi utilizat pentru modificare dimensiune font în funcție de dimensiunea
ecranului.
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
div.example {
font-size: 30px;
}
}
4.RWD – IMAGES/ Imagini flexibile
Dacă setam proprietatea width a unei imagini ca procent și height auto imaginea va deveni
responsive si se va scala.
Exemplu
img {
width: 100%;
height: auto;
}
Scalarea în exemplul de mai sus se va realiza prin mărire față de dimensiunea originală. O
soluție mai bună este utilizarea proprietății max-width.
Dacă proprietatea max-width este setată la valoarea 100% imaginea se va scala în jos dar nu
va deveni niciodată mai mare decât dimensiunea originală/initială.
Exemplu
img {
max-width: 100%;
height: auto;
}
Imaginile de background pot fi scalate si redimensionate la rândul lor. Există 3 metode

diferite pentru a realiza acest lucru:
1. setam proprietatea background-size la valoarea "contain" caz în care imaginea se va

scala și va încerca să se încadreze în zona de conținut. Imaginea se va scala fără a se
deforma pastrându-și aspectul / raportul proporțional între înălțime și lungime.
COD CSS
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
}
2. setăm proprietatea background-size la valoarea "100% 100%" caz în care imaginea se

va întinde astfel încât să acopere întreaga zonă de conținut.
COD CSS
div {
width: 100%;
height: 400px;
background-size: 100% 100%;
}
3. setăm proprietatea background-size la valoarea "cover" caz în care imaginea se va

scala astfel încât să acopere toată zona prin menținerea aspectului imaginii dar existând
posibilitatea de a fi tăiată.
COD CSS
div {
width: 100%;
height: 400px;
background-size: cover;
}
O imagine mare este potrivită și utilă pentru un ecran de calculator dar inutilă pentru un
dispozitiv cu eran mic= telefon mobil. Astfel că în acest caz nu are rost să fie utilizată o
imagine mare care trebuie scalată/micșorată.
Pentru reducerea timpului de încărcare a imaginilor se pot utiliza media queries pentru a afișa
imagini de dimensiuni diferite în funcție de dispozitivul utilizat.
Imagine mare
imagine mica
Exemplu
/* For width smaller than 400px: */

body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */

body {
}
}
Putem utiliza min-device-width din media query în loc de min-width, care verifică
lățimea/width echipamentului în loc de lățimea/width ferestrei de browser.
Exemplu
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For devices 400px and larger: */

@media only screen and (min-device-width: 400px) {
body {
}
}
Elementul HTML5 <picture> permite definirea de imagini diverse din surse diferite și
funcționeaza asemănător elementelor <video> și <audio>.
Exemplu
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Atributul srcset este necesar și definește sursa imaginii. Atributul media este opțional și
acceptă media querie-urile definite în CSS @media.
Este necesară și definirea unui element <img> pentru browser-ele care nu recunosc elementul
<picture>.

Piu C7

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Piu C7

Uploaded by

Copyright:

Available Formats

https://www.w3schools.com/css/css_rwd_grid.

HTML5 introduce o metodă ce permite designerilor să controleze viewport-ul & anume

Un <meta> element viewport dă instrucțiuni browser-ului de modul în care să controleze

width=device-width – specifică lățimea paginii care trebuie să urmeze lățimea ecranului

2. RWD – GRID VIEW / griduri fluide

Utilizarea grid-urilor responsive / griduri fluide implică existenta a 12 coloane cu o lătime

Modalitate de construire grid-uri fluide:

Primul pas - ne asigurăm că toate elementele au proprietatea box-sizing setată la border-box

Adaugați următorul cod în CSS

Toate aceste coloane trebuie să aibă opțiunea float:left și un padding de 15 px.

Putem adăuga stiluri și culori pentru a arăta mai bine:

.col-1 {width: 8.33%;}

@media only screen and (max-width: 600px) {

/* For mobile phones: */

/* For mobile phones: */

@media only screen and (min-width: 768px) {

/* Extra small devices (phones, 600px and down) */

/* Medium devices (landscape tablets, 768px and up) */

/* Large devices (laptops/desktops, 992px and up) */

Putem utiliza media-queris pentru a modifica layout-ul paginii în funcție de orientarea

@media only screen and (orientation: landscape) {

/* If the screen size is 600px wide or less, hide the element */

4.RWD – IMAGES/ Imagini flexibile

Imaginile de background pot fi scalate si redimensionate la rândul lor. Există 3 metode

1. setam proprietatea background-size la valoarea "contain" caz în care imaginea se va

2. setăm proprietatea background-size la valoarea "100% 100%" caz în care imaginea se

3. setăm proprietatea background-size la valoarea "cover" caz în care imaginea se va

/* For width smaller than 400px: */

/* For width 400px and larger: */

/* For devices 400px and larger: */

You might also like