Zapytanie @media dla dużych rozdzielczości

Question

Cześć,

mam problem z zapytaniem @media dla dużych rozdzielczości - właściwie to dla rozdzielczości mojego monitora :)

W HTML zdefiniowane:

<meta name="viewport" content="width=device-width, initial-scale=1">

W stylach CSS zdefiniowane i działa:

- mobile-first,

- tablet

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) 

- monitor

@media (min-width: 1025px) and (max-width: 1280px)

 Teraz pora na większe rozdzielczości, więc zastosowałem:

@media (min-width: 1281px)

i się okazuje, że po zamknięciu "Inspekcji" w Chrome i wprowadzeniu np. koloru dla elementu  "<p>," w stylach CSS kolor się nie zmienia - wszystkie style są pobierane z "bazowego css", czyli tego zdefiniowanego dla urządzeń mobilnych w pionie.

Rozdzielczość mojego monitora to: 2560x1440, więc jakie zapytanie powinienem zastosować?

Answer 1

Po pierwsze: nie musisz domykać przedziału z obu stron. Jeżeli dasz @media (max-width: 768px) a później @media (max-width: 1120px) to style powinny się automatycznie aplikować.

Szybki przykład pokazuje, że jest wszystko okej: https://codepen.io/radek024/pen/NWgZBMJ

Możesz sprawdzić, czy domknąłeś klamry.

Comments

Dziś przeanalizowałem kod i rzeczywiście brakowało klamry domykającej :)