Media Types

Stefanescu Mihai 2 years ago CSS

Unul dintre cele mai mari avantaje ale CSS-ului este ca poti specifica pe ce tip de media va fi prezentat continutul: ecran, hartie, tableta, telefon, s.a.m.d.

Pentru a stabili tipurile de media avem doua optiuni:

  • putem specifica tipul de media direct din fisierul de stil folosind @media
  • Putem stabili asta in headerul documentului HTML

Regula @media

Regula @media specifica tipul de media dorit (daca sunt mai multe se separa prin virgula).

@media print {
    body { font-size: 100%; }
  }
  @media screen {
    body { font-size: 1.2em; }
  }
  @media screen, print {
    body { line-height: 24px; }
  }

In documentul HTML

In HTML 4.0 atributul media specificat in elementul LINK trebuie sa precizeze tipul de media.

<link rel="stylesheet" type="text/css" media="print, handheld" href="stil_print.css">

Tipuri de media

Numele tipurilor de media sunt destul de explicative pentru dispozitivele dorite.

Mai jos am scris o lista cu tipurile de media:

Valoare Descriere
 all  Potrivit pentru toate dispozitivele
 aural  Creeat pentru sintetizatoare de vorbire
 braille  Creeat pentru dispozitivele tactile
 embossed  Creeat pentru dispozitive ce printeaa folosind limbajul braille
 handheld  Potrivit pentru telefoane, smartphone-uri, si alte dispozitive cu ecran mai mic (in CSS3 au fost introduse o serie de media types creeate special pentru smartphone-uri si tablete, acestea se vor gasii intr-un articol separat)
 print  Potrivit pentru print.
 projection Potrivit pentru proiectar.
 screen  Potrivit pentru computere

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.