Jak zrobić stronę na komputer i urządzenia mobilne ?

Question

Witam,

jestem początkujący programistą (hobby) dlatego nie wiem o nim za dużo i dopiero się uczę. Chciałbym się dowiedzieć jak nazywa się lub jak zrobić coś takie aby strona była optymalna dla wszystkich urządzeń. Próbowałem bawić się podając jednostki w % ale nie wiem do końca jak to działa i od czego zazwyczaj bierze % . Robiłem to na metodzie prób i błędów jednak wiem, że na dłuższa metę ta metoda się nie sprawdzi. Dlatego piszę do was do najlepszego polskiego forum informatycznego :)

Comments

Akurat na początek:

https://www.youtube.com/watch?v=H7LUUsbpbrg

---

Piwo dla Pana wyżej! 

Answer 1

Responsywna (ang. responsive). Możesz użyć frameworka, takiego jak MaterializeCSS, Bootstrap, Skeleton. Albo przy custom design pobawić się zasadą @media.

przykład: 

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

więcej informacji: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Comments

Szerokość strony dziel na kolumny. Używaj rozwijanej nawigacji przy odpowiednio małych urządzeniach

---

Co do % to bierze % od rodzica (elementu blokowego wyżej), albo od wielkości strony w przeglądarce.

---

Da się określić od czego chce wziąć % ? czasami na divie który był pusty dawałem mu wysokość i szerokość w % dajmy 30% ale nie robiło mi się na 30 % ekranu tylko na np. 15% :/

---

Niestety w CSS nie.

Answer 2

Zainteresuj się media queries - to dzięki nim możemy tworzyć strony responsywne, czyli wyświetlające się dobrze zarówno na komputerach, jak i komórkach. Jeżeli wcześniej nie miałeś styczności z takim czymś, polecam serdecznie ten kanał - The Ninja Net, na którym typek dobrze tłumaczy, jak zrobić tego typu stronę(i nie tylko, ma wiele ciekawych tutoriali).