Co to znaczyło ekran @media only i (min-device-width: 320px) i (max-device-width: 480px)

Question

Co to oznacza w pliku css Wordpress Twenty Eleven.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Answer 1

Nazywa CSS3 Media Queries która jest techniką, aby pomóc swojej stronie dostosować do różnych wymiarów ekranu lub w zasadzie, to pomaga dostarczać różne style do różnych urządzeń.

Ponieważ jesteś nowy, niech rozbić zapytanie mediów na dwie części:

@media only screen 

Oznacza to będziemy stosować style css do urządzenia z ekranem. Słowo kluczowe only użyte tutaj do ukrycia arkuszy stylów ze starszych przeglądarek od obejrzenia arkusza stylów telefonu.

and (min-device-width: 320px) and (max-device-width: 480px) 

Jest to całkiem oczywiste, ponieważ oznacza to, że określone CSS tylko zastosowania, gdy urządzenie ma wielkość wysokości ekranu przy minimalnym 320px i maksymalnie 480px w wymiarze szerokości.

Answer 2

Specyfikacja zapytań o media zawiera również tylko słowo kluczowe, które służy do ukrywania zapytań o media ze starszych przeglądarek. Podobnie jak nie, słowo kluczowe musi znaleźć się na początku deklaracji. Na przykład:

media="only screen and (min-width: 401px) and (max-width: 600px)" 

przeglądarek, które nie rozpoznają zapytań o media oczekują listę rozdzielonych przecinkami typów mediów, a specyfikacja mówi powinni natychmiast obciąć każdą wartość przed pierwszym inny niż alfanumeryczny znak, który nie jest myślnik. Tak, stary przeglądarka powinna interpretować poprzedniego przykładu jak to:

media="only" 

Przykłady jeden po drugim

@media (max-width:632px) 

Ten jeden mówi do okna z max-szerokość 632px, który chcesz zastosować te style. Przy takim rozmiarze w większości przypadków mówimy o czymkolwiek mniejszym niż ekran komputera.

@media screen and (max-width:632px) 

Ten jeden mówi do urządzenia z ekranem i okna z max-szerokość 632px zastosować styl. Jest to prawie identyczne z powyższym, z wyjątkiem tego, że określasz ekran, w przeciwieństwie do innych dostępnych rodzajów mediów, z których najczęściej drukowany jest inny.

Aby stylu dla wielu smartfonów z mniejszych ekranów, można napisać:

@media screen and (max-width:480px) { … } 

Aby zablokować starszych przeglądarek widząc arkusz iPhone lub Android stylu telefonu, można napisać:

@media only screen and (max-width: 480px;) { … } 

Answer 3

LET'S zrozumieć znaczenie kodu krok po kroku:

Twój kod:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Reguła @media służy do definiowania różnych reguł stylu dla różnych typów mediów/urządzeń.

Słowo kluczowe tylko zapobiega stosowaniu podanych stylów w starszych przeglądarkach, które nie obsługują zapytań o media z funkcjami multimedialnymi. Nie ma wpływu na współczesne przeglądarki.

Aby ograniczyć style do urządzeń z ekranie i której minimalna i maksymalna szerokość jest znana, można łańcucha funkcje multimedialne do typu nośnika ekran:

screen and (min-device-width: 320px) and (max-device-width: 480px) 

Dalsze wytyczne można sprawdzić MDN website by clicking here