Responsywna strona, zmiana w strukturze

Question

Witam. Dopiero co zacząłem przyswajać wiedzę z dziedziny responsywności i mam pytanie.

W CSS w sekcji @media można zmieniać wygląd elementów pod daną szerokość ekranu a jak zrobić, aby przy mniejszej szerokości wstawić jakiegoś diva w miejsce tego, który jest przy większej szerokości ? Np. często przy zwykłej szerokości jest pokazane zwyczajne menu a na mniejszych ekranach sama belka, która po kliknięciu się rozwija i pokazuje menu i jak tego diva z belką zaaplikować tylko przy mniejszym ekranie ? Konieczny jest tutaj JS ?

Answer 1

Hejka, nie jest konieczny tutaj Js. Wystarczy zwykły css ustawiasz pod media maksymalną szerokość dla której ma być widoczny div na stronie np. @media screen and (max-width 768px) czyli jeżeli będzie strona mniejsza niż 768px to ma się dziać jakaś akcja. Chcesz aby np. po tych przykładowych 768px nie był widoczny jakiś już div to kopiujesz go i wklejasz pod media w klamrach a następnie przypisujesz mu wartość (temu divowi) display: none; czyli będzie nie widoczny ;) Na podobnej zasadzie dodajesz nowe divy. Myślę, że troszkę zrozumiałeś nie wyspany jestem :(  Pozdrawiam.

Answer 2

https://www.youtube.com/watch?v=6benQW541p0

Answer 3

A czy można stylizować w CSS znaczniki semantyczne html5 czy lepiej tworzyć w nich np. divy a semantykę zostawić jedynie do wiadomych celów ?

Comments

Nigdy nie styluj po znacznikach, nadaj im klasę i po niej leć. Np. <header class="page-header"> i później w cssie .page-header {}