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

RWD pytanko.

VPS Starter Arubacloud
0 głosów
220 wizyt
pytanie zadane 27 kwietnia 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

Cześć, mam pytanie co do RWD.

Stworzyłem dużo @media na swojej stronie aby dostosowywała się do wielkości ekranu różnych urządzeń. 

Z google brałem rozmiary klikając w te tabele

Wszystko działa, ale jak już roździelczość zmieni się np. na Iphone 6 to wszystko się psuje, i mam pytanko czy tworząc RWD muszę te wszystkie rodzielczosci popularnych telefonów uwzględniać w @media? Czy jest jakiś inny sposób?

 

4 odpowiedzi

0 głosów
odpowiedź 27 kwietnia 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)
wybrane 27 kwietnia 2017 przez Vorex444
 
Najlepsza
/* --------------------- 480px -------------------------- */

@media (max-width: 480px) { 

}

/* --------------------- 767px x 490px -------------------------- */

@media (max-width: 767px) and (min-width: 490px) { 

}

/* --------------------- 1023px x 768px -------------------------- */

@media (max-width: 1023px) and (min-width: 768px) { 

}

/* --------------------- 1279px x 1024px -------------------------- */

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

}

 

tutaj masz kodzik z którego ja korzystam, działa na wszystkich rozdzielczościach nawet na Iphone

komentarz 27 kwietnia 2017 przez Vorex444 Dyskutant (9,610 p.)
dzięki ;)
komentarz 27 kwietnia 2017 przez Vorex444 Dyskutant (9,610 p.)
wszędzie ma być width?
komentarz 28 kwietnia 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)
Ma być tak jak tutaj
+1 głos
odpowiedź 27 kwietnia 2017 przez pablop76 VIP (123,060 p.)
edycja 27 kwietnia 2017 przez pablop76

Witam. Jest to spowodowane tym, że iphony maja ekrany o wyższej rozdzielczości przy tych samych rozmiarach(ratio 2). W takim wypadku lepiej użyć osobnego arkusza stylów , który to wykryje

<link rel="stylesheet" media= "(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="iphone.css">

Aczkolwiek musisz sprawdzić jaką szerokość ekranu ma iphone6 bo 480px to iphone4.

komentarz 27 kwietnia 2017 przez Vorex444 Dyskutant (9,610 p.)
dzięki
+1 głos
odpowiedź 27 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)
nie polecam brać gotowych rozdzielczości "popularnych" telefonów, bo i tak jest tego za dużo ;)
jak tworzysz stronę najpierw na kompy to zmniejszają ją i dodawaj reguły, kiedy zacznie się coś psuć, a jak mobile first to zwiększaj i też czekaj, aż coś zacznie się sypać
0 głosów
odpowiedź 27 kwietnia 2017 przez jpacanowski VIP (101,940 p.)

Czy jest jakiś inny sposób?

Mobile First... Dopiero od szerokości 768px w górę warto stosować inne rozwiązanie niż procentowe (o ile to potrzebne).

komentarz 27 kwietnia 2017 przez Vorex444 Dyskutant (9,610 p.)
edycja 27 kwietnia 2017 przez Vorex444
No dobra rozumie, ale ja wlasnie do rozdzielczosci 768px mam inny wyglad, nic nie jest procentowe itp. Ty chyba nie rozumiesz pytania tak wgl
komentarz 27 kwietnia 2017 przez Vorex444 Dyskutant (9,610 p.)
chce mieć od roździelczosci np.

@media (max-width:320px) and (max-height:575px) do @media (max-width:375px) and (max-height:575px) takie same style a już powyżej jeszcze inne i właśnie nie wiem jak to zrobić.
komentarz 27 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

o co chodzi z tym:

warto stosować inne rozwiązanie niż procentowe

użycie % gdzie?

Podobne pytania

0 głosów
2 odpowiedzi 219 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)
0 głosów
2 odpowiedzi 481 wizyt
pytanie zadane 6 marca 2019 w HTML i CSS przez ricksanchez1943 Początkujący (260 p.)
0 głosów
4 odpowiedzi 391 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez Piotr Jarema Użytkownik (970 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...