Detectați dimensiunile browserului cu CSS3

Când începem direct în lumea design receptiv este important să știm care sunt noile reguli CSS3, acest lucru ne ajută să detectăm dimensiunile ecranului pe care este vizualizat site-ul web sau aplicația.
Una dintre aceste reguli este @jumătate, care cu o combinație adecvată de condiții ne permite să cunoaștem dimensiunea ecranului ca atare și, în funcție de rezultat, să luăm măsurile pertinente în ceea ce privește proiectarea acestuia.

Utilizarea interogărilor media

Să creăm un cod HTML simplu și acolo vom include foaia noastră de stil, care va conține regulile noastre inseamna dorinta, sa vedem:

 Detectați dimensiunile ecranului 

După cum putem vedea, este un cod destul de simplu, totuși există mai multe lucruri de evidențiat. Primul este inclus în etichete stil, acolo avem două reguli, prima indică faptul că din 600 pixeli culoarea de fundal a textului nostru de pe etichetă h1 Se va schimba în albastru, să vedem când redimensionăm în browser și această modificare intră în vigoare:

A doua regulă indică faptul că, dacă lățimea maximă este 400 pixeli culoarea de fundal a textului se va schimba în roșu, ceea ce indică o a treia condiție, deoarece totul sub 400 pixeli va fi roșu și peste 600 va fi albastru, deci de la 401 la 599 pixeli va păstra culoarea albă implicit, să vedem:

În cele din urmă, dacă micșorăm mult mai mult ecranul browserului nostru, vom introduce regula pentru culoarea roșie a fundalului, să vedem cum arată:

Vedem atunci că detectarea dimensiunilor browserului nostru este o sarcină extrem de simplă datorită CSS3, ceva extrem de util atunci când lucrăm cu design-uri receptive și trebuie să cunoaștem dimensiunile browserului utilizatorului pentru a aplica stiluri care fac ca site-ul nostru să arate bine pe orice dispozitiv și rezoluția de ecran existentă.