Responywne strony www - jak je tworzyć?

Witajcie!

Od dawna borykam się z problemem jaki stanowi responsywność.

Chce ją dodać za pomocą media queries i czy wystarczą same CSS czy jednak coś jeszcze potrzeba?

Oraz jak ustawić diva wraz z zawartością na cała wysokość okna przeglądarki? Próbowałem min-height, height ale nie chce działać. Możliwe, że błędną składnie media stosuje, dlatego chce wiedzieć jak powinna wyglądać poprawna.

Chce ją dodać za pomocą media queries i czy wystarczą same CSS czy jednak coś jeszcze potrzeba?

Wystarczą same CSS do czasu gdy chciałyś blok html'a przestawić w inne miejsce, wtedy poleciałbym enquire.js chociazby.

Oraz jak ustawić diva wraz z zawartością na cała wysokość okna przeglądarki? Próbowałem min-height, height ale nie chce działać

Da się, aczkolwiek to nie jest tak proste jak z width Jeśli masz problemy to w ostateczności możesz uzyć do tego JS, ale jak mówię - w ostateczności.

dlatego chce wiedzieć jak powinna wyglądać poprawna.

http://css-tricks.co...andard-devices/

Polecam poradnik: http://webdesign.tut...webdesign-14888, wyjaśnia bardzo dogłębnie jak stworzyć responsywne strony.

Wystarczą same CSS do czasu gdy chciałyś blok html'a przestawić w inne miejsce, wtedy poleciałbym enquire.js chociazby.

Hej
Css flexbox model sprawdza się znakomicie

Serio ? Nie sądzę byś mógł z headera wyciągnąć coś do footera za pomocą flexa.

Serio ? Nie sądzę byś mógł z headera wyciągnąć coś do footera za pomocą flexa.

Teraz to już wybrzydzasz

A jest jakaś strona, która pozwala online sprawdzić jak strona prezentuje się na ekranie monitora, tablecie, smartfonie, itp.?

A jest jakaś strona, która pozwala online sprawdzić jak strona prezentuje się na ekranie monitora, tablecie, smartfonie, itp.?

http://web-talk.pl/t...rozdzielczości/

Jakie są podstawowe rozdzielczości ekranów, tj. tabletów i smartfonów w pionie i poziomie.

Jakie są podstawowe rozdzielczości ekranów, tj. tabletów i smartfonów w pionie i poziomie.

Nie do końca wiem, do czego zmierzasz Jeśli chodzi o stylkowanie, to ja najczęściej tworzę na bootstrapie i przedziały jakich używam to:

 

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape tablet and desktop */
@media (min-width: 980px) and (max-width: 1200px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

A te responsywne menu, tj. są takie 3 paski i po kliknięciu w nie rozwija się menu to jak się robi?

A te responsywne menu, tj. są takie 3 paski i po kliknięciu w nie rozwija się menu to jak się robi?

Stylujesz menu dla odpowiedniej wersji AWD a zwijanie<>rozwijanie to chwila roboty przy jquery.

Istnieje sporo gotowych rozwiązań, więc szukaj pod responsive / mobie menu.

Widziałem jeszcze cudowanie bazujące na składnie input+label z pseudoklasą checked/focus ale nie jest to poprawne semantycznie, więc jak dla mnie odpada.

Poza tym, nie zawsze da się zastosować pozycjonowanie absolutne lub fixed, więc bez duplikowania menu w inne miejsce się nie obejdzie.

Poza tym, nie zawsze da się zastosować pozycjonowanie absolutne lub fixed, więc bez duplikowania menu w inne miejsce się nie obejdzie.

Dlaczego nie zawsze (pomijając już tabele) i o jakim duplikowaniu mowa oraz w jakim celu ?

Dlaczego nie zawsze (pomijając już tabele) i o jakim duplikowaniu mowa oraz w jakim celu ?

Przykład który dość niedawno stosowałem dotyczył podwójnego menu pod @media <460px.

Jedno główne, dwupoziomowe nav + dodatkowe menu boczne wyświetlane w niektórych działach lub podstronach.

Ponieważ p:fixed nie wchodziło w grę, a absolutnego nie sposób było odpowiednio wypozycjonować, ze względu na kontenery w jakich owe nawigacje były zagnieżdżone, tedy jscriptowo duplikowałem kontenery nawigacyjne gdzieś na początek nagłówka strony, ukrywając je potem w pierwotnych pozycjach (przy określonym AWD i małej ilości JS można je usunąć zamiast ukrywać).

Przypadek specyficzny. Dla większości firmowych sajtów-wizytówek niepotrzebne są takie gimnastyki

Użytkownik Zimistrz edytował ten post 21 sierpnia 2014 - 19:32

Dzięki koledzy, ale użyłem po prostu tego: https://github.com/micjamking/Menutron

Proste w obsłudze oraz wiem, że zawszę zadziała i nie bede musiał się przejmować jakimś skomplikowanym procesem instalacji XD

A te responsywne menu, tj. są takie 3 paski i po kliknięciu w nie rozwija się menu to jak się robi?

Ja polecam bazować na frameworkach CSS typu Bootstrap3, czy Foundation5 Tam takie menu masz za darmo, wystarczy pod siebie ostylować.

Ja polecam bazować na frameworkach CSS typu Bootstrap3, czy Foundation5 Tam takie menu masz za darmo, wystarczy pod siebie ostylować.

Rozbije się o optymalizację i osobiste animozje.

Ja z BS korzystam bo muszę, nie bo chcę.

Niestety ugrzęzłem we własnym frameworku, bo zaczął przypominać inne i stało się to bezsensowne na dłuższą metę.