Jak zrobić, aby strona była responsywna

Question

Dzień dobry jak w temacie. Jak zrobić, żeby strona była responsywna

Comments

Myślę że warto zacząć chociaż od skopiowania tytułu i wklejenia go do wyszukiwarki.

---

Sprawdź bibliotekę bootstrap

Answer 1

uwzględnić różne ekrany w css... za mało danych aby coś konkretniej powiedzieć

Comments

Kiedyś jak byłem na kursie tworzenia stron Pan nam pokazał, że po wpisaniu jednej komendy da się zrobić, aby strona była responsywna

---

@Webmaster123, może chodzi Ci o coś takiego:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

umieszczone w nagłówku head dopasowuje/skaluje wymiary strony do urządzenia, ale umówmy się, to strony od razu responsywnej nie czyni.

https://developer.mozilla.org/pl/docs/Programowanie_WWW/Responsive_Web_design

---

ło Panie, to co to był za kurs :) heh, to daj no mi gościa... na cholerę ja się męczę w te ceesesy i ux designerzy kombinują makiety na różne ekrany itp... też chcę poznać tę magiczną komendę :)

Answer 2

Polecam bulmę.

https://bulma.io/documentation/columns/basics/

Chyba naprostszy grid dla responsywnych stron jak dla mnie.

Jeśli umiesz po angielsku to bez problemu powienieneś ogarnąć.

Można użyć tylko sam grid (wystarczy zupełnie dla responsywnej strony), nie trzeba wszystkiego.

W skrócie, taki kod: 

<div class="columns">
  <div class="column">
    
  </div>
  <div class="column">
    
  </div>
  <div class="column">
    
  </div>
  <div class="column">
    
  </div>
</div>

Div z klasą columns i w środku divy z klasą column - tych drugich jak widać jest 4.

A więc będą się wyświetlać jeden obok drugiego, każdy jedną czwartą długości będzie zajmował.

Poniżej pewnej rozdzielczości będą się wyświetlać jeden pod drugim.

Ot cała filozofia.

Żeby ustawić dokładniejszą długość każdego diva z klasą column lub zmienić poniżej jakiej rozdzielczości ma spadać jedno pod drugie wystarczy przeczytać co jest na stronie, podałem link.
Poza tym jeżeli chcesz np. stworzyć obraz w tle na całą długość strony zawsze, wystarczy, że wpiszesz width 100% w

css, jak chcesz wysokość żeby się dostosowywała to height: auto.

No i oczywiście jeszcze media queries.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

W podanym kodzie css przykładowym tylko do rozdzielczości ekranu 600px tło będzie lightblue, powyżej 600px szerokość ekranu tło będzie według ustawień, jeśli nie ustawiono to będzie białe,

W ten sposób można 'ręcznie' dostosować wygląd strony w zależności od rozdzielczości.

Popularne tak zwane breakpointy to na przykład:

576px - poniżej dla telefonów mniejszych, powyżej dla większych, 768px dla tabletów, 992px dla mniejszych monitorów i większych tabletów, 1200px dla reszty.

Gdybyś chciał mogę ci wysłać sam grid bulmy, bo z ich strony ciężko ogarnąć bo mają w sassie i trzeba kompilować.

A ja mam już gotowy css.