HTML Responsive Web Design. Elementul HTML picture. Responsive Text Size.

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:

<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.