HTML Responsive Web Design. Elementul HTML picture. Responsive Text Size.
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Memorator: Descriere video Descarcă PDF
Afișați imagini diferite în funcție de lățimea browserului
Elementul HTML <picture> vă permite să definiți imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Redimensionați fereastra browserului pentru a vedea cum se schimbă imaginea de mai jos în funcție de lățime:
Exemplu:
Responsive Text Size
Mărimea textului poate fi setată cu o unitate „vw”, ceea ce înseamnă „lățimea vizualizării” (viewport width).
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:
Exemplu:
Viewport este dimensiunea ferestrei browserului. 1vw = 1% din lățimea viewport. Dacă viewport are 50 cm lățime, 1vw este 0,5 cm.
Elementul HTML <picture> vă permite să definiți imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Redimensionați fereastra browserului pentru a vedea cum se schimbă imaginea de mai jos în funcție de lățime:
Exemplu:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_pumpkinflowers.jpg" media="(max-width: 1500px)">
<source srcset="pumpkinflowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size
Mărimea textului poate fi setată cu o unitate „vw”, ceea ce înseamnă „lățimea vizualizării” (viewport width).
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:
Exemplu:
<h1 style="font-size:10vw">Hello World</h1>
Viewport este dimensiunea ferestrei browserului. 1vw = 1% din lățimea viewport. Dacă viewport are 50 cm lățime, 1vw este 0,5 cm.
Navigare în lectii
Cumpara abonament
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.
