RWD pytanko.

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

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

odpowiedź 27 kwietnia 2017 przez pablop76 VIP (123,180 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

odpowiedź 27 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

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ć.