Media Types

postat acum 2 ani de Stefanescu Mihai in categorie 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

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!