• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywność strony

Object Storage Arubacloud
0 głosów
811 wizyt
pytanie zadane 5 maja 2019 w HTML i CSS przez Dajm Nowicjusz (160 p.)

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?

komentarz 5 maja 2019 przez kalczur Gaduła (4,320 p.)
Ogarnij bibliotekę bootstrap na przyszłość, zaoszczędziłbyś se pisania większości styli
komentarz 7 maja 2019 przez Hasira Bywalec (2,100 p.)

@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
    } 
}

 

komentarz 7 maja 2019 przez hun1er76 Stary wyjadacz (11,960 p.)
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.

3 odpowiedzi

0 głosów
odpowiedź 5 maja 2019 przez Majki Obywatel (1,410 p.)
Dej linka, albo jak nie jest w necie to kod wrzuć.
komentarz 5 maja 2019 przez Dajm Nowicjusz (160 p.)

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

0 głosów
odpowiedź 5 maja 2019 przez `Krzychuu Stary wyjadacz (13,940 p.)

Spróbuj zrobić tak:

@media (min-width: 480px) {

}

jeżeli chcesz zrobić przedział od do:

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

}

 

komentarz 5 maja 2019 przez Dajm Nowicjusz (160 p.)
Właśnie tak robie ;c
komentarz 5 maja 2019 przez `Krzychuu Stary wyjadacz (13,940 p.)
wywal screen i zobacz czy coś się zmieni
komentarz 6 maja 2019 przez Dajm Nowicjusz (160 p.)
To samo
0 głosów
odpowiedź 7 maja 2019 przez pirouetti Mądrala (6,490 p.)

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.

Podobne pytania

0 głosów
1 odpowiedź 496 wizyt
0 głosów
2 odpowiedzi 249 wizyt
0 głosów
0 odpowiedzi 131 wizyt
pytanie zadane 8 stycznia 2018 w C i C++ przez Xenoxer Użytkownik (560 p.)

92,674 zapytań

141,575 odpowiedzi

320,045 komentarzy

62,038 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...