Jaka jest najlepsza praktyka w zapytaniach o media w CSS3?

Question

szukam odpowiedzi na kilka pytań dotyczących funkcji CSS3 - Media Queries:

1. Którędy lepiej (dla przeglądarki ze względu na wydajność) do deklarowania reguł CSS dla różnych rozdzielczościach?

   //this in head: 
   <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" /> 
   
   //or this in css file: 
   @media only screen and (max-width: 1024px){ 
       //styles here 
   } 
   

2. Jaka jest różnica między max-device-width i max-width? Czy jest to jedyna reguła przeznaczona dla przeglądarek mobilnych (max-device-width) lub stacjonarnych (max-width)?

3. Jeśli napiszę regułę zapytań o media dla tabletu z rozdzielczością 1280x800, gdzie użytkownik może również korzystać z trybu portret/krajobraz, jak powinien wyglądać? Powinienem napisać zasady dla max-width: 800px i max-width: 1280px lub jest inny sposób?

4. Jeśli piszę zasady powinienem napisać coś takiego:

   <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... /> 
   

   lub zamiast tego dwa:

   <link ... media="only screen and (max-device-width: 480px) ... /> 
   <link ... media="only screen and (max-device-width: 1024px) ... /> 
   

---

PS: Proszę wybaczyć każdą pisowni lub błędów gramatycznych, angielski nie jest moim pierwszym językiem

P.S.S. Zanim opublikowałem to pytanie, spędziłem trochę czasu, aby wyszukać na stackoverflow i nie znalazłem informacji na temat tego pytania. Jeśli się myliłem i jest podobne pytanie, usunę mój post.

Answer 1

1. Reguły w pliku css w celu zmniejszenia liczby żądań (lepsze pod względem wydajności).

2. • max-width jest szerokość obszaru wyświetlania docelowej

   • max-device-width jest szerokość całego obszaru renderowania urządzenia

3. Innym sposobem wiem aby ustawić portret lub krajobraz, dodaj orientation w ten sposób:

/* portrait */ 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) { 
    /* styles here */ 
} 

/* landscape */ 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) { 
    /* styles here */ 
} 

4. Aby zdefiniować stylów dla urządzeń mobilnych o szerokości między 320 a 480 pikseli musisz napisać:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css"> 

// 1 Znak równości brakowało, < 6 chars limitu. Mody, usuń to.Dzięki

Answer 2

Szukam dobrych informacji na temat najlepszych praktyk w zakresie projektowania responsywnego, a dam ci radę.

W wersji This question programista napotyka problem, gdy używa stanu pionowego CSS i powoduje wyświetlenie klawiatury po wybraniu tekstu wejściowego dokumentu. Nie jestem pewien, dlaczego, ale łamie warunek portretu.

W informatorze This website można znaleźć informacje na temat lepszych praktyk podczas tworzenia zapytania o media, które uważam za najlepsze. Osobisty Użyję kwerendy typu Exclusive w mojej witrynie.

Ale z drugiej strony można śledzić rekomendacje This site. Sądzę, że mają rację, ale ja wolę tworzyć i używać popularnych zapytań o media dla różnych urządzeń.

Oto lista:

• < 480px (co odnosi się do starszych, mniejszych smartfonów rozmiarów ekranu)
• < 768px, który jest idealny dla większych smartfony i mniejszych tabletek

• 768px , co dotyczy wszystkich większych elementów, takich jak duże ekrany tabletów i ekrany komputerów.

Ponadto, mogą one być stosowane zbyt jeśli masz energię i czas:

• < 320px, co jest dobre dla starszych małych, niskich res telefony

• Arkusz stylów 1024px do szerokich ekranów na komputerach.

Mam nadzieję, że to pomoże.