Cauta rapid aici ↑

CSS - TIPURI DE MEDIA SI RESPONSIVE DESIGN

Limbajul CSS ne ajuta in multe situatii dificile si nici in cazul urmator nu face exceptie, ca doar pentru asta a si fost creat. Anumite situatii ne cer sa printam o pagina web, sa proiectam pe un perete mai multe pagini web una dupa alta pe verticala sau in cel mai frecvent caz sa adaptam paginile noastre pentru toate dispozitivele, fie mobile sau de birou.

PROPRIETATEA @media

Cu ajutorul acestei proprietatii @media putem sa introducem stilurile noastre pe care ni le dorim atunci cand pagina web este printata, folosita pentru un slider pe ecran etc. In cazul nostru o vom folosi pentru a adapta pagina web in functie de rezolutia ecranului dispozitivului cu care sunt accesate paginile noastre. Sintaxa pentru aceasta proprietate in cazul adaptarii paginii web pentru mai multe tipuri de dispozitiv este urmatoarea.

 @media only screen and (max-width: valoare in pixeli ){ /* cod CSS */ }

Cuvantul cheie screen este cel care indica ca blocul de cod din urmatoarele doua acolade este folosit exclusiv pentru ecran de dispozitiv , fie el smartphone, tableta, laptop sau desktop. In interiorul acoladelor vom avea aceleasi declaratii de stil cu care am creat pagina noastra pentru desktop dar pentru respectiva dimensiune in pixeli. Un alt aspect foarte important este sa avem in fiecare pagina in zona de head urmatoarea linie de cod ce va face ca stilurile declarate pentru dimensiunea maxima in pixeli sa fie afisata corespunzator si la dimensiunea normala cu care le vedem si in browser-ul laptop-ului sau desktop-ului, in caz contrar dimensiunea fontului sigur va fi afisata foarte mica pe dispozitivele mobile.

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

TOATE TIPURILE DE MEDIA

TIPURI MEDIADESCRIERE
allFolosit pentru toate tipurile de media
auralFolosit pentru vorbire si sintetizatoarele de sunet
brailleFolosit pentru dispozitivele de feedback tactil in limbaj braille
embossedFolosit pentru imprimantele ce scriu in limbaj braille
handhelFolosit pentru dispozitivele mici sau portabile
printFolosit pentru a imprima pe hartie o pagina web
projectionFolosit pentru prezentari de proiecte, cum ar fi slide-uri
screenFolosit pentru ecranul unui computer
ttyFolosit pentru mass-media
tvFolosit pentru dispozitive de tip televiziune