Błędy podczas wczytywania strony dla zapytania @media.

Question

Chce stworzy stronę responsywna od podstaw dlaczego napisałem media dla rozdzielczości 370px, 700 px ale wszystko mi się rozwala. Przy rozdzielczości 370 px nie wczytuje mi css dla tej rozdzielczości. Jak usunę media dla rozdzielności 700 px wtedy strona dla 370px rozdzielności wczytuje mi się poprawienie jedynie czasami pojawia mi się czarny pasek po prawej stronie strony co może być powodem takich sytuacji ?

Poniżej dołączam link do codepan: 

https://codepen.io/marek687/pen/MWYgRvB

Answer 1

Wydaje mi się, że wszystko się wczytuje, ale najpierw w hierarchii stylów masz 200px w linijce 259 i tym sposobem ten zapis ma najwyższą wartość. Twój zapis mówi "aż do tylu px" używaj tego stylu, więc przy 700px również media z 370px są poprawne. Rozwiązanie: zamiast tworzyć w @media "max-width" zacznij używać "min-width", wtedy ustalasz sobie 100% szerokości na urządzeniach mobilnych i np. pierwszy breakpoint przy min-width 576px i wybraną szerokość dla contentu strony. Następnie np. dla min-width 768px kolejne style i tak dalej.

Comments

W takim razie zastosuję  się do twoich rad. Dziękuje za odpowiedz i pomoc.