Określanie szerokości-wysokości w 2015 roku.

pytanie zadane 8 czerwca 2015 w HTML i CSS przez Vinyljam Nowicjusz (180 p.)

Hej. Można powiedzieć, że piszę w CSS na poziomie średnim i właśnie doszedłem do mojego pierwszego, większego dylematu. Celowo napisałem w tytule "w 2015", gdyż teraz mnóstwo osób ma monitor panoramiczny. Dotychczas wykonywałem ćwiczeniowe strony określając stałe wartości wysokość-szerokość w px. Zatem moje pytanie brzmi, jak w dzisiejszych czasach powinno kodować się strony? Unikać stałych wartości i zapisywać je w %, czy odwrotnie?

Lepiej będzie, jak zaprezentuję to na przykładzie. Za chwilę zabieram się do stworzenia layoutu do statycznej strony kwiaciarni mojej mamy. Zależy jej na totalnej prostocie i minimalizmie, czyli w nowoczesnym stylu. Chcę stworzyć coś podobnego do tego.

Myślę, że stworzę diva container o szerokości 1200px, a w nim kolejno pozostałe divy. Do tego niektóre kafelki będą odnośnikami do galerii, a pojemnik z galerią stworzę łącząc ze sobą te 4 divy na zdjęciu idąc od dołu.

Czy to dobry plan, tak by w przyszłości, jak już się nauczę dodać do tego responsywność?

PS: Może moglibyście polecić mi jakąś galerię z lightboxem, którą mógłbym zaimplementować na stronie?

Pozdrawiam

3 odpowiedzi

odpowiedź 8 czerwca 2015 przez iwan9449 Pasjonat (20,810 p.)

odpowiedź 8 czerwca 2015 przez testerius Pasjonat (23,960 p.)
edycja 8 czerwca 2015 przez testerius

Hej, najlepiej zrobisz jeśli stworzysz projekt responsywny, wtedy w zależności od rozdzielczości będziesz mógł zmieniać szerokość kontenera. Możesz również skorzystać lub samemu z pomocą jakiegoś tutoriala opracować własny, prosty grid, który umożliwi ci rozmieszczanie elementów na stronie i tym samym za pomocą niego będziesz mógł opracować jakieś "responsywne układy", no krótko mówiąc strona będzie mobile friendly co w dzisiejszych czasach to standard.

W Bootstrapie wygląda to mniej więcej tak:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Dla każdej z rozdzielczości .container przyjmuje inną szerokość.

Nie chcę cię namawiać do korzystania z technologii x czy y, ale warto zapoznać się z frameworkiem Bootstrap, jeśli nie chcesz tworzyć wszystkie od nowa (w szczególności grida) to warto. W sytuacji gdy nie potrzebujesz pewnych komponentów, bo nie będziesz z nich korzystał możsez spersonalizować sobie Boostrapa za pomocą tego narzędzia na oficjalnej stronie.

Co do skryptów galerii to od siebie mogę polecić:

- http://lokeshdhakar.com/projects/lightbox2/

- https://github.com/mjackson/shadowbox

Edit: Bootstrapa jeszcze można "customizować" za pomocą wersji źródłowych LESS/SASS.

odpowiedź 8 czerwca 2015 przez Vinyljam Nowicjusz (180 p.)

Dziękuję bardzo za odpowiedzi. Potrzebowałem właśnie takiego drogowskazu.

Żałóżmy, że zrobię całość to tak, by poprawnie wyświetlało się na mniejszych roździelczościach, tylko co wtedy z tym lightbox'em2 i galeriami? Czy on jest "sam w sobie" responsywny? Pytam, gdyż z JS jestem kompletnie zielony.

komentarz 8 czerwca 2015 przez testerius Pasjonat (23,960 p.)

Tak, zmniejsz ekran przeglądarki i zobacz jak to działa. Znajomość JS również nie jest potrzebna, wystarczy umiejętność podpinania skryptów i zerknięcie na demo po to aby poznać strukturę galerii. ;)