Która reguła CSS pozwala stosować różne style w zależności od szerokości ekranu (kluczowa w RWD)?
Źle.
@import dołącza inny arkusz stylów, nie warunkuje stylów rozmiarem ekranu.Źle.
@font-face dołącza własną czcionkę, nie reaguje na rozmiar ekranu.Źle.
@keyframes definiuje klatki animacji, nie dotyczy responsywności.Dobrze.
@media stosuje wybrane style przy spełnieniu warunku, np. zakresu szerokości ekranu.Reguła
@media (media query) pozwala uzależnić style od warunków urządzenia - najczęściej od szerokości okna. Zapisuje się w niej warunek, np. @media (max-width: 600px) { ... }, a style w środku zadziałają tylko, gdy jest on spełniony. To podstawowe narzędzie RWD: dzięki niemu ten sam dokument inaczej wygląda na telefonie i na monitorze. Dlatego kluczowa dla responsywności jest reguła @media.Pozostałe reguły at-rules dotyczą czego innego.
@font-face pozwala dołączyć i nazwać własną czcionkę, ale nie zmienia układu w zależności od ekranu. @import służy do wczytania kolejnego arkusza stylów do bieżącego - to organizacja kodu, nie responsywność. @keyframes opisuje kolejne etapy animacji i również nie reaguje na szerokość urządzenia. Dopasowanie stylów do rozmiaru ekranu umożliwia wyłącznie @media, dlatego to ona jest poprawna.