Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Cumpara abonament!
Plateste cu PayPal

Interogări media CSS - exemple. Galerie de imagini flexibile. Site web flexibil. Orientare: Portret / Peisaj. Lățimea minimă până la lățimea maximă.

Partajeaza in Google Classroom

Partajeaza cu Google Classroom
Susține Lectii-Virtuale!

Memorator: Descriere video Descarcă PDF

Galerie de imagini flexibile

Folosim interogări media împreună cu flexbox pentru a crea o galerie de imagini responsive.

Site web flexibil

Utilizăm interogări media împreună cu flexbox pentru a crea un site web responsive, care conține o bară de navigare flexibilă și conținut flexibil.

Orientare: Portret / Peisaj

Interogările media pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.

Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Landscape):

Exemplu:

Utilizați o culoare de fundal lightblue (background color) dacă orientarea este în modul peisaj (landscape):
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Lățimea minimă până la lățimea maximă (Min Width to Max Width)

Puteți utiliza, de asemenea, valorile (max-width: ..) and (min-width: ..) pentru a seta o lățime minimă și o lățime maximă.

De exemplu, când lățimea browserului este cuprinsă între 600 și 900px, schimbați aspectul unui element <div>:

Exemplu:
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
Folosind o valoare suplimentară: În exemplul de mai jos, adăugăm o interogare media suplimentară la cea existentă folosind virgulă (aceasta se va comporta ca un operator OR):

Exemplu:
/* Când lățimea este între 600px și 900px OR peste 1100px - schimbați aspectul <div>  */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
Cumpara abonament
Plătește cu PayPal

Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale Scoala365 partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2024 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri