Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ CSS _ Jakie rozdzielczości zdjęć przygotować to strony responsywnej

Napisany przez: swiderek31 16.04.2017, 11:19:58

Witam, jest dość dużo rozdzielczości urządzeń, nie jestem w stanie przygotować wszystkich i zastanawiam się jakie kilka rozdzielczości zdjęć przygotować pod moją stronę responsywną.

Banner na stronie jest szerokośći 100% i wysokości vh i image (cover) ma rozdzielczość 3000x2000 lecz do mniejszych rozdzielczości nie potrzebuje takiego dużego zdjęcia, zatem przez css media bym ustalał które zdjęcie wybrać pod konkretną rozdzielczość ale się zastanawiam jakie rozdzielczości wybrac?

Napisany przez: czarkowy 8.08.2017, 12:55:16

Cytat(swiderek31 @ 16.04.2017, 12:19:58 ) *
Witam, jest dość dużo rozdzielczości urządzeń, nie jestem w stanie przygotować wszystkich i zastanawiam się jakie kilka rozdzielczości zdjęć przygotować pod moją stronę responsywną.

Banner na stronie jest szerokośći 100% i wysokości vh i image (cover) ma rozdzielczość 3000x2000 lecz do mniejszych rozdzielczości nie potrzebuje takiego dużego zdjęcia, zatem przez css media bym ustalał które zdjęcie wybrać pod konkretną rozdzielczość ale się zastanawiam jakie rozdzielczości wybrac?


poczytaj w internecie o najpopularniejszych używanych rozdzielczościach przez użytkowników i je na pewno wybierz i możesz dodac jakieś włąsne,
albo stworzyć responsywność tak jak Ty chcesz, np. 1920/1280/1024/960/800 i np wszystko z szerokością 800 w dół ustaliłbyś sobie, że strona przyjmuje już stylowanie dla urządzeń mobilnych/tabletów, bo i tak szansa, że trafi się osoba co by miała stacjonarnie monitor <800 jest mocno nierealna ;d

zawsze też możesz się posłużyć jakimś freamworkiem do css np. Bootstrap, gdzie już masz przez kogoś założone te szerokości i są chyba to te jedne z popularniejszych ;d
chyba coś takiego:
  1. /* Extra small devices (phones, less than 768px) */
  2. /* No media query since this is the default in Bootstrap */
  3.  
  4. /* Small devices (tablets, 768px and up) */
  5. @media (min-width: @screen-sm-min) { ... }
  6.  
  7. /* Medium devices (desktops, 992px and up) */
  8. @media (min-width: @screen-md-min) { ... }
  9.  
  10. /* Large devices (large desktops, 1200px and up) */
  11. @media (min-width: @screen-lg-min) { ... }


i zawsze na zdjęciu możesz w css zastosować max-width/min-width

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)