Zapytania o media CSS

Question

Próbuję dostosować moją aplikację internetową na tablety do telefonów komórkowych. Funkcja Media Query wydaje się być doskonała, co potwierdzają moje wstępne testy. Mam pytanie: czy telefony i tablety zmieniają orientację z pionowej na poziomą (po obróceniu urządzenia), co odnosi się do szerokości maksymalnej?

Innymi słowy, większe telefony z systemem Android mają rozdzielczości rzędu 480 x 800, iPhone4 ma rozdzielczość 640 x 960, a oryginalny Blackberry Torch ma rozdzielczość 360 x 480. Są to wszystkie rozdzielczości (W x H), gdy urządzenia są trzymane w trybie portretu, więc szerokości wynoszą odpowiednio 400, 640 i 360. Jednak po obróceniu urządzenia do pionu wysokość "staje się" szerokością dla celów wyświetlania. Tak więc efektywne szerokości w krajobrazie wynoszą odpowiednio 800, 960 i 480, a szerokości 800 i 960 nakładają się na szerokości tabletu, które zakłócają wyświetlanie.

Czy szerokość ma zawsze szerokość? To znaczy, kiedy urządzenie zgłasza swoje wymiary, czy wartość szerokości pozostaje zawsze taka sama dla celów CSS, czy też wartość szerokości zmienia się, gdy urządzenie obraca się do pejzażu?

Dziękuję wszystkim z góry.

Answer 1

Wartość szerokości zmieni się po odwróceniu urządzenia, ponieważ zmienia się również szerokość wyświetlanej strony.

Jeśli chcesz zapytać, czy urządzenie jest używane w trybie poziomym lub pionowym, można użyć właściwości orientacji zamiast:

@media screen and (orientation: portrait) { 
} 

to sprawdzi, czy szerokość okna przeglądarki jest większa niż wysokość (orientacja: krajobraz spowoduje odwrotność). Aby uzyskać najlepsze wyniki, prawdopodobnie będziesz musiał użyć kombinacji wielu właściwości MQ, używając operatora "i" do testowania łańcuchów. tj .:

@media screen and (orientation: landscape) and (max-width: 960px) { 
} 

pełna lista właściwości MQ jest dostępna here.

Answer 2

Wartość zmian css w zależności od jego krajobrazu lub nie na telefonie komórkowym, ponieważ szerokość i wysokość zmian wyświetlacza w telefonie komórkowym po obróceniu telefonu lub tabletu. więc musisz określać styl css, aby celować w to, co chcesz.

@media (min szerokość: 700px) i (orientacja: poziomej) {

}

dla szczegółowego zrozumienia zapytań mediów stronie: http://letsdopractice.com/css-media-queries/

Answer 3

Zapytania nośników są używane do określenia stylu dla różnych rozmiarów ekranu. Opowiem wam o podstawach dotyczących zapytań o media. Składnia mediów CSS Query jest:

@media not|only mediatype and (media feature) { 
CSS-Code; 
} 

uzyskać szczegółowe informacje zapytania mediów składnia toturial odwiedź This Site