Responsywność strony - urządzenia mobilne i PC.

Responsywność to dopasowywanie się strony tak by była poprawnie wyświetlana na telefonie i komputerze, różne rozdzielczości i tak dalej.

Moje strony wyglądają jako tako na pc (na moim laptopie) a na innych rozdzielczościach się rozjeżdżają nie mówiąc już o innych urządzeniach.
Mam div i używam głównie vw, vh w definicjach odpowiednio szerokości i wysokości elementu ale na przykład 70 vh wysokości na moim laptopie jest ok ale na ekranie 4k już nie. Nie wiem jakich technik używać i jak to "załapać"
Jak tworzy się responsywne strony, jakich technik się używa?
Słyszałem o @media ale kojarzy mi się on, nie wiem czy słusznie, z drabinką if'ów tak więc czy @media to jedyny dobry sposób?

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
W linku jest tak dużo przykładów różnych urządzeń że @media to faktycznie drabinka if'ów.
Czy responsywność strony polega na czymś takim?

Czy responsywność strony polega na czymś takim?

Jeśli wszystko planujesz pisać od zera - tak (chociaż istnieją narzędzia ułatwiające tę pracę, np. Sass).
Rzuć okiem na gotowe frameworki w stylu Bootstrap.

Aktualnie uskuteczniam w MDL'u ale i tak jakoś nie łapie tej responsywności.

Tzn.? Jak zadasz konkretne pytanie, będzie Ci można udzielić sensowniejszej odpowiedzi :)
W stylu zupełnie nie rozumiem konceptu xyz.

Jakieś to wszystko zagmatwane.
@media drabinka if'ów to już samo w sobie mnie odpycha ale jak trzeba...
Tak swoją drogą jaką mam pewność że drabinka if'ów sprawi że wszystko będzie pięknie wyglądać?

EDIT:
Tamta strona ma wszystkie przypadki i typy urządzeń jakimi muszę się przejmować a reszta się jakoś dopasuje?

drabinka if'ów to już samo w sobie mnie odpycha ale jak trzeba

Przecież Ci mówię: nie trzeba, a nawet jest to wysoce niewskazane, zwłaszcza bez wcześniejszej wiedzy na temat, na czym w ogóle polega RWD. Popatrz sobie na grid w Bootstrapie.

Tak swoją drogą jaką mam pewność że drabinka if'ów sprawi że wszystko będzie pięknie wyglądać?

Sam możesz przecież sprawdzić zmieniając wielkość okna przeglądarki ;-)

Tamta strona ma wszystkie przypadki i typy urządzeń jakimi muszę się przejmować a reszta się jakoś dopasuje?

"tamta", czyli która?

Patryk27 napisał(a):

drabinka if'ów to już samo w sobie mnie odpycha ale jak trzeba

Przecież Ci mówię: nie trzeba, a nawet jest to wysoce niewskazane, zwłaszcza bez wcześniejszej wiedzy na temat, na czym w ogóle polega RWD. Popatrz sobie na grid w Bootstrapie.

Tak swoją drogą jaką mam pewność że drabinka if'ów sprawi że wszystko będzie pięknie wyglądać?

Sam możesz przecież sprawdzić zmieniając wielkość okna przeglądarki ;-)

Tamta strona ma wszystkie przypadki i typy urządzeń jakimi muszę się przejmować a reszta się jakoś dopasuje?

"tamta", czyli która?

Używam MDL i tam też jest GRID.
https://getmdl.io/components/index.html#layout-section/grid
ale nie zawsze wszystko mogę jakoś do ich GRID'a włożyć i wtedy muszę sam zrobić by mój element stał się responsywny.

Zmieniając rozmiar okna przeglądarki będę miał absolutną pewność że na iPhone strona będzie tak samo wyglądać?

"tamta" - no tamta, o tam :)
Chodziło mi o to że tam są w przykładach są telefony HTC czy Galaxy ale nie wiadomo czy na każdym Iphonie z androidem strona będzie wyglądała dobrze.
Są tam trzy typy urządzeń a gdzie jest reszta? LG Nokia itd?
Swoją droga dlaczemu muszę rozdrabniać się na tych producentów (tam na stronie w linku w pierwszym poście)?

Cały mój problem wziął się stąd że mam w MDL GRID'a i dwa CELL na komputerach i laptopach zajmują one po 6 na 12 "tych jednostek" ale na telefonach każda ma po 12 czyli na całą szerokość ekranu. Problem jest w tym że w środku każdej CELL'i mam powiedzmy div'a o rozmiarze 50vw; To się sprawdza na komputerach i tabletach ale na telefonach gdy CELL'a ma 12 ten div musi mieć całą szerokość strony. I z tym walczę bo nie wiem co dać w @media żeby łapało tylko telefony.
Rozumiem że wkleić drabinkę if'ów z linku w pierwszym poście HTC Iphone czy Galaxy i to tyle?

Zmieniając rozmiar okna przeglądarki będę miał absolutną pewność że na iPhone strona będzie tak samo wyglądać?

Nie wiem, jaka przeglądarka jest na iPhonie - jeśli Chrome, powinieneś uzyskać 1:1 to samo.

Problem jest w tym że w środku każdej CELL'i mam powiedzmy div'a o rozmiarze 50vw

Dlaczego bawisz się w vw? Powinieneś to również rozwiązać gridem.
Podaj konkretny przykład tego, gdzie masz to 50vw, a pomyślimy, jak to rozwiązać sensowniej.

Są tam trzy typy urządzeń a gdzie jest reszta? LG Nokia itd?

Masz na myśli te wszystkie telefony z Androidem, na których znajduje się identyczna przeglądarka? :-)

OT. nie wiem na ile można poważnie traktować framework, który ma zrąbany layout na swojej własnej stronie

przy dostatecznie małym oknie scroll chowa się pod nagłówkiem

jak chcesz prosty material to polecam materialize, ostatnia wersja jest naprawdę dopieszczona
http://materializecss.com/
jak tylko prosty grid to skeleton który zajmuje 200 linijek :)
http://getskeleton.com/
grid dostosowuje obraz nie do danego telefonu tylko wielkości ekranu, czasami niektóre przeglądarki różnie wyświetlają (szczególnie z blokerami) no ale nie przetestujesz na każdej, bo jest ich kilkadziesiąt, życie

@Patryk27:
Mam grida, w którym mam dwa celle każdy zajmuje po połowie strony, teraz chciałbym by na telefonach komórkowych zajmowały cała szerokość i tak się dzieje.
Problem leży w tym że w danym gridzie na desktopie rozmiar elementu który się w nim zajmuje wynosi 50vw czyi połowę ekranu i to się na komputerach sprawdza (w każdym razie na moim) i teraz na urządzeniu mobilnym treść zajmuje połowę ekranu (bo gdy grid jest na całość to jego zawartość na 50vw to wiadomo) a powinno być na cały ekran.
Chciałbym by zdjęcie i opis obok wypełniały cały swój cell ale nie bardzo wiedziałem jak to zrobić, próbowałem coś z width: auto itd ale jakoś nie szło dlatego użyłem 50vw. Dodaje stronę i zdjęcie w załącznikach.
Kod HTML:

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--12-col-phone">
        <div class="feature-card-image mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand"></div>
            <div class="mdl-card__actions">
                <span class="feature-card-image__filename"></span>
            </div>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--12-col-phone">
        <section class="description">
            <h3>Lorem ipsum dolor sit amet</h3>
            <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Vivamus at libero convallis, pellentesque turpis ac, tincidunt dui. 			<br>Nulla vel velit tortor. Integer posuere faucibus enim eu aliquet. <br>Donec et ante justo.</h5>
            <h5>
                <ul>
                    <li>Lorem ipsum dolor</li>
                    <li>consectetur adipiscing</li>
                    <li>Vivamus at libero</li>
                </ul>
            </h5>
        </section>
    </div>
</div>

i kod CSS:

.feature-card-image.mdl-card {
    width: 50;
    height: 70vh;
    float: left;
    background: url('../images/nophoto.jpg') center / cover;
}

.feature-card-image>.mdl-card__actions {
    /*height: 52px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);*/
}

.feature-card-image__filename {
    /*color: #fff;
    font-size: 14px;
    font-weight: 500;*/
}

.description {
    width: 50vw;
    height: 70vh;
    float: left
}

.description>h3 {
    color: #263238;
    text-align: center;
}

.description>h5 {
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    color: #647B86
}

.description>h5>ul>li {
    font-size: 18px;
    text-align: left;
    margin: 0px;
    color: #647B86
}

Ach, rozumiem o co Ci chodzi;
Rozwiązanie jest stosunkowo proste: przestań wykorzystywać dziwny framework, którego nikt nie zna, i przenieś się na Bootstrapa ;p

Dlaczego w .description masz width: 50vw;, zamiast po prostu 100%?

Po zmienieniu na 100% jest lepiej ale wykryłem innym kłopot.

Otóż zdjęcia i teksty obok nich występują naprzemiennie raz jedno po lewej a drugie po prawej i na odwrót ale na urządzeniu mobilnym jest jedno pod drugim i wtedy są sytuacje że mam dwa opisy koło siebie albo dwa obrazki. I teraz co tym fantem zrobić? Może jakiś skrypt w JS modyfikujący kod html jeśli wykryje urządzenie mobilne? Oczywiście strzelam bo w css chyba tego nie zrobię. Na urządzaniu mobilnym miałoby być tak że jest obrazek i opis pod nim, nie inaczej. Macie jakieś koncepcje?

A jak mój kod HTML5?

Nie ma potrzeby od razu pchać JS - w Bootstrapie służą temu klasy push/pull, poszukaj czegoś podobnego dla tego Twojego frameworka.

ten FW co używasz to raczej ciekawostka, może coś z tego będzie może nie, wygląda mi to na betę
nawet ich przykłady gridu działają nieprawidłowo na stronie więc ciężko liczyć aby to działało na twojej
mówię, uderz w materialcss i spokojnie stronkę zbudujesz bez bólu z normalnymi nazwami klas które są uniwersalne, a nie jakieś cele, phone, :) jedno zdanie żeby jedną kolumnę zrobić... kaman

To jeszcze nie koniec :D
Tam w tych celach ustaliłem 100% i jest pinknie.

Ale co się tyczy responsywności, ja zawsze używałem albo procentów albo, ostatnio w sumie wyłącznie, vw i vh.
Zawsze miałem z tym problem że ustawiając diva na 40vw i 70 vh, powiedzmy, to na laptopie wyglądało to dobrze a na ekranie 4k to już wszystko było po prostu za duże, z procentami tak samo. To w końcu jak czego używać by mieć ładne stronki na każdej rozdzielczości, zmieniać rozmiar okna przeglądarki :D to już ustaliliśmy, bootstrap ma jakieś "takie" techniki że dobrze wygląda i na ekranie full hd i 4k? Czy kluczem do sukcesu jest po prostu zasada @media?

Nie wykorzystuj vw/vh - jeśli masz mieć kontener o wskazanych wymiarach (w stylu na komputerach 100%, na telefonach 50%), wykorzystaj mechanizm gridów.

bootstrap ma jakieś "takie" techniki że dobrze wygląda i na ekranie full hd i 4k?

Bootstrap nie jest żadnym pliczkiem, który dołączasz do gotowej strony, aby zaczęła ładnie się prezentować - musisz nauczyć się najpierw odpowiednio go wykorzystywać, wykonać kilkanaście projektów, i dopiero z czasem poznasz dokładny mechanizm funkcjonowania RWD.

Ja się podepnę, bo nie ma sensu tworzyć nowego wątku.
Jeśli chodzi o metody @media queries, to jakie rozdzielczości pisać reguły? Wiadomo, że to zależy też od projektu ale jakieś granice są.
Tak jak w Bootstrapie 4? Czy może jakieś inne?

Dostosuj się pod wykorzystywany framework.
Jeśli nie piszesz w żadnym frameworku (i z jakiegoś powodu faktycznie chcesz się bawić w @media samemu), zaciągnij je np. właśnie z Bootstrapa.