[CSS+HTML] Prosta strona "responsywna"

Question

Cześć. Mam za zadanie stworzyć niby "stronę responsywną", tak ażeby zależnie od zmiany rozdzielczości strona się dopasowywała - nie myślałem jeszcze wgl o responsywności, bo dopiero co nauczyłem się CSS'a i HTML oraz cięcia szablonów i nie wiem jak się za to zabrać. Na YouTube znalazłem taki filmik.

https://youtu.be/H7LUUsbpbrg

Ale wydaje mi się, iż takie "zaawansowanie" na tę chwilę jest zbędne. Da się zrobić tak, żeby stronę napisać w HTML'u, wygląd zdefiniować w CSS jak zawsze, a rozdzielczość ustawić w @media i @media queries? To dla mnie nowe reguły i nie wiem czy jest to możliwe... Jak to powinno prawidłowo wyglądać? Chciałbym w @media określić rozdzielczości i napisać stronę "po staremu", tylko nie wiem jak ugryźć temat :) Framework Bootstrap by sprawę ułatwił, ale jeszcze się go nie uczyłem, a zadanie mam zrobić do czwartku, więc proszę Was o pomoc.

Answer 1

Ja bym na twoim miejscu zrobił tak, ściągnał i zaimplementował bootstrapa i używając tylko class col-xx-yy i container i row (przeczytanie o tym jak to działa zajmie Ci 20 minut) zbudował tę prostą stronę przy ich użyciu. Te klasy zastąpią Ci mozolne pisanie wszystkich @media dla poszczególnych rozdzielczości. Myślę, że sporo czasu zaoszczędzisz. :)

Comments

Podesłałbyś mi tutaj jakieś linki, bo chciałbym nauczyć się tego co jest najistotniejsze - jeżeli jest to oczywiście możliwe, to byłbym wdzięczny.

Poszukam i zobaczę co znajdę.

---

Kolega nie umie dobrze CSS, a ty mu polecasz bootstrapa? Niech zacznie od podstaw: procenty, media queries, flexbox.

Answer 2

Tutaj masz opisane @media queries po polsku - webkod

W dużym skrócie wygląda to tak

@media all and (min-width:480px) and (max-width:800px) {
  div {
    /* twoje style */
  }
}

 

Comments

Czyli definiuję sobie minimalną szerokość i maksymalną szerokość dla strony poprzez @media, a potem w @media umieszczam style strony i wszystko co znajduje się w @media ma narzucone ustalone wcześniej zachowanie, tak?

---

Tak tylko że style znajdujące się w media są ważniejsze.

div {
  background: blue;
}
@media all and (min-width:480px) and (max-width:800px) {
  div {
   background: red;
  }
}

/* dla rozdzielczości 480 - 800 div będzie miał czerwone tło */

 

---

Tak tylko że style znajdujące się w media są ważniejsze.

No nie koniecznie wazniejsze bo jesli zapiszemy to tak:

@media all and (min-width:480px) and (max-width:800px)
 {
    div 
    {
         background: red;
    }
}

div
{
    background: blue;
}

 to div bedzie zawsze niebieski niewazne jaki rozmiar bedzie mialo okno.

Answer 3

PSD to Responsive Website Tutorial

Link, który podałem to bardzo fajny poradnik wyjaśniający tworzenie takich stron w oparciu o pisanie strony. Tworzenie stron responsywnych, jak i wszystko, czego się uczysz - to nie wyłącznie praktyka. Musisz trochę nad tym pomyśleć - chociażby w wolnej chwili.