Responsywność strony

Question

Witam. Napisałem stronę (taki pierwszy poważniejszy projekt robiony na własną rękę) i kiedy w sumie już ją skończyłem i napisałem również style dla trybu responsywnego (5 innych rozdzielczości) to telefon nadal nie chce ich odczytywać tylko czyta te które są przeznaczone dla zwykłego monitora. Style responsywne pisałem w oparciu o tryb responsywny w firefoxie i tam wszystko śmigało, a zgrywając stronę na telefon nagle nic nie działa i wszystko się rozjeżdża. 

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

mam dodane a style edytuje

@media screen and (min-width:...){
}

Coś poradzicie?

Comments

Ogarnij bibliotekę bootstrap na przyszłość, zaoszczędziłbyś se pisania większości styli

---

@Dajm, 5 różnych rozdzielczości? Nie ma sensu rozdzielczości są 3(4, jeżeli liczymy powyżej 4k)

1. Wszystko powyżej 1200px (laptopy i monitory)
2. Poniżej 992px I powyżej 600px (małe laptopy i tablety)
3. Poniżej 600 px (telefony)

Bazuj na tych rozdziałach i wszystko powinno być ładnie ;)

Tu przykład:

@media (max-weight: 992px) {
    menu_pc {
        display:none
    } 
    menu_tabletu/telefon {
        display:block
    } 
}

 

---

Przecież dobór progów w media queries jest zależna od zastosowanych elementów layoutu, tak aby przy danej rozdzielności wyglądały estetycznie. Nie ma żadnych uniwersalnych.

Answer 1

Dej linka, albo jak nie jest w necie to kod wrzuć.

Comments

Ladniej napisany kod mam na 2 komputerze i nie mam opcji teraz przerzucic wiec jest nieschludnie napisana (normalnie pisze style w 2 pliku ale dla pokazania wrzucilem do jednego kodu / z racji ze jest tutaj ograniczenie znakow to wklejam link

LINK

Answer 2

Spróbuj zrobić tak:

@media (min-width: 480px) {

}

jeżeli chcesz zrobić przedział od do:

@media (min-width: 480px) and (max-width: 1024px) {

}

 

Comments

Właśnie tak robie ;c

---

wywal screen i zobacz czy coś się zmieni

---

To samo

Answer 3

W przeglądarce na kompie na różnych rozdzielczościach też się czasem rozjeżdża albo pojawia białe tło bardzo długie.

Dla responsywnej strony najlepiej także użyć gridu, nie tylko media queries.

Polecam https://bulma.io/documentation/columns/basics/

Jest bardzo łatwy ten grid.

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

Ten prosty kod z gridem bulmy i w środku masz 4 elementy po 1/4 długości a dla telefonów spadają jeden pod drugi.

Jeśli chcesz mogę ci wysłać sam grid bo mają tam sam grid tylko w sassie, albo cały framework w css, co jest zbędne, sam grid wystarczy.