Responsywność, czy osiągnąłem ją, czy przypadek?

pytanie zadane 9 kwietnia 2016 w HTML i CSS przez pawelpawel Początkujący (480 p.)

Witam wszystkich!

Uczę się teraz responsywności.

Poczytałem, przejrzałem wiele sposobów i zacząłem kodować.

Skodowałem takie coś:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PRÓBA</title>

    <style>
	
	#container
	{
	min-width: 400px;
	max-width: 1500px;
	background-color: red;
	padding: 30px;
	}
      
	.menu
	{
	background-color: white;
	min-width: 300px;
	max-width: 1400px;
	margin-left: auto;
	magrin-right: auto;
	padding: 5px;
	}
	
	.home
	{
	background-color: green;
	width: 200px;
	height: 40px;
	margin: 10px;
	padding-left: 10px;
	float: left;
	}

	
	.dupa
	{
	background-color: yellow;
	width: 200px;
	height: 40px;
	margin: 10px;
	padding-left: 10px;
	float: left;
	}
	
	.noga
	{
	background-color: blue;
	float: left;
	width: 200px;
	height: 40px;
	margin: 10px;
	padding-left: 10px;
	}
	
    </style>
	
	
	
  </head>

  <body>

    
	<div id="container"> 
	
	
	
		<div class="menu">
		<div class="home"> home </div>
		<div class="dupa"> dupa</div>
		<div class="noga"> noga</div>
		<div style="clear: both;"></div>
		</div>
	
	</div>
	
  </body>
</html>

Jak otwieram stronę w przeglądarce i zmniejszam ekran to niby wygląda dobrze, elementy w divie menu schodzą ładnie w kolumnę. Wygląda że działa.

Proszę o pomoc, czy to jest może pozorna responsywność? Może nie będzie działać na telefonie, lub innym mniejszym ekranie. A może wszystko jest ok i mogę w taki sposób ustawiać responsywność.

Wszystkie tutoriale jakie czytałem uczyły w inny sposób. Mój kod to wynik zabawy.

Czekam na odpowiedź! (Miłej soboty :)

6 odpowiedzi

odpowiedź 9 kwietnia 2016 przez Thonem Obywatel (1,230 p.)

To w ogóle nie jest RWD. Zauważ, że gdy zmniejszasz ekran, na dole pojawia się pasek do przewijania w poziomie.

komentarz 9 kwietnia 2016 przez pawelpawel Początkujący (480 p.)

Tak, ale pojawia się on dopiero kiedy ekran jest mniejszy niż minimalny container czyli 400px.

Thonem, czyli uważasz że takie coś jest niezgodne ze sztuką kodowania? Myślisz że na telefonie zachowałoby się tak samo jak na komputerze?

1	komentarz 9 kwietnia 2016 przez Eimens Maniak (69,240 p.) <div class="dupa"> dupa</div> SERIO ?!

komentarz 9 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

Ja dla contenera zawszę daję max-width: 1200px

komentarz 12 kwietnia 2016 przez Thonem Obywatel (1,230 p.)

Dziwne, u mnie zmniejsza się do ok 860 px i pojawia się pasek.

odpowiedź 9 kwietnia 2016 przez pakopaw Użytkownik (820 p.)

Nie jestem jeszcze ekspertem, ale kilka rad jestem w stanie napisać.

Zobacz sobie statystyki rozdzielczości http://ranking.pl/pl/rankings/screen-resolutions.html, na drugim miejscu jest 360 (dałeś 400). Możesz też zerknąć na http://stackoverflow.com/questions/21574881/responsive-design-with-media-query-screen-size
Do #container radziłbym dodać width: 100% i koniecznie box-sizing: border-box (bez tego faktyczną szerokością będzie nie width, lecz width + padding + border).
Ogólnie powszechną praktyką jest operowanie na szerokościach w % i odrębne style CSS dla różnych rozdzielczości jak nieco niżej w linku do stackoverflow który dałem w pkt 1.
Menu warto robić jako listę <ul>. Dzięki sile CSS z surowej listy punktowanej, można spokojnie zrobić menu jakie masz teraz (w sieci jest pełno porad jak to zrobić chociażby http://www.kurshtml.edu.pl/css/poziome_menu,menu.html).
Bez sensu pisać to samo w css dla .home, .dupa, .noga. Zawsze można nadać drugą klasę np. "menu-item" (np. class="menu-item home") i dać wspólne własności w selektorze ".menu-item" (docelowo w <ul>, które proponuję "ul.menu li"), a w .home, .dupa, .noga tylko odrębne kolory teł.

odpowiedź 9 kwietnia 2016 przez ojel Nowicjusz (190 p.)

Ja proponuje dodać taki zapis w css :

@media only screen and (min-width: 768px) { /*to ustawienia rozdzielczości dla komputerów*/
* {
    box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;

}

.row:after {
    content: "";
    clear: both;
    display: block;
}

/*a to dla mobilnych*/

@media only screen and (max-width: 500px) {
    [class*="col-"] {
        width: 100%;
    }

* {
    box-sizing: border-box;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

potem tylko dodasz to div-ów klasy (np. <div class="menu col-3 col-m-12"> ... </div>)

1	komentarz 9 kwietnia 2016 przez jpacanowski VIP (101,940 p.) No to mamy Bootstrapa v.0.1 ;D

komentarz 9 kwietnia 2016 przez pawelpawel Początkujący (480 p.)

WOW!

Nie rozumiem jak mam to dopisywać do divów... Nie znam tych znaczników, gdyby ktoś opisał dokłądniej to co Olej napisał, albo Ty Olejku byś mi to wytłumaczył bądź jak ktoś ma jakieś linki pomocne, artykuły to powinno mi wystarczyć

komentarz 10 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

Jaki Olej? ;D

komentarz 10 kwietnia 2016 przez ojel Nowicjusz (190 p.)

Przepraszam że tak nie dokładnie, nowy na forum jestem ;)

Chodzi o to, że tworzysz klasy i określasz w css ich szerokość w % - czyli ile dany element będzie zajmował % wielkości ekranu. Robisz klasy col- dla normalnych komputerów i col-m- dla urządzeń mobilnych, gdyż elementy mogą mieć inne szerokości na różnych ekranach (np część menu na komputerze może mieć szerokośc 25 %, a na telefonie zajmować 100% ekranu na samej górze)

. [class*="col-"] {
float: left;
padding: 15px;
} - ten fragment mówi nam, że wszystkie elementy którym dasz klasę col- będą miały float:left i padding 15px.

jak jeszcze jakieś pytania do pisz

odpowiedź 10 kwietnia 2016 przez pawelpawel Początkujący (480 p.)

Cześć!

zobaczcie teraz, wydaje mi się iż jest ok teraz. (pomijam fakt że mam trochę za dużo kodu, znaczy można by to było skompaktować tak jak pakopaw napisał.

Dla wartości rozdzielczości mniej niż 400px, dałem mniejsze height divów w menu, ale w przyszłości dodam funkcję, że gdy rozdzielczość bd mniejsza niż 400px to ukaże się tylko ikonka z rozwijanym menu (ale teraz jeszcze nie umiem zrobić rozwijanego menu) PS już nie ma "dupy" jest "noga"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PRÓBA</title>

    <style>
	
	#container
	{
	box-sizing: border-box;
	width: 100%;
	background-color: red;
	padding: 30px;

	}
      
	.menu
	{
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	max-width: 1000px;
	
	padding: 5px;
	}
	
	.home
	{
	background-color: green;
	width: 200px;
	height: 40px;
	margin: 10px;
	padding-left: 10px;
	float: left;
	}

	
	.glowa
	{
	background-color: yellow;
	width: 200px;
	height: 40px;
	margin: 10px;
	padding-left: 10px;
	float: left;
	}
	
	.noga
	{
	background-color: blue;
	float: left;
	width: 200px;
	height: 40px;
	margin: 10px;
	padding-left: 10px;
	}
	
	@media all and (max-width:1000px) and (min-width:600px)
	{
	
	 
	 .home, .glowa, .noga
	{
	width: 20%;
	}
	 
	}
	
	@media all and (max-width:600px) and (min-width:400px)
	{
	.home, .glowa, .noga
	{
	float: none;
	color: red;
	width: 60%;
	
	}
	}
	
	@media all and (max-width:400px)
	{
	
	.home, .glowa, .noga
	{
	float: none;
	color: brown;
	width: 60%;
	height: 70%;
	}
	
	}
	
	
    </style>
	
	
	
  </head>

  <body>

    
	<div id="container"> 
	
	
	
		<div class="menu">
		<div class="home"> home </div>
		<div class="glowa"> glowa</div>
		<div class="noga"> noga</div>
		<div style="clear: both;"></div>
		</div>
	
	</div>
	
  </body>
</html>

odpowiedź 10 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

odpowiedź 10 kwietnia 2016 przez pawelpawel Początkujący (480 p.)

Jak nie jest RWD? [ teraz mam na myśli drugi kod z @media]

przecież responsywna, znaczy dostosowująca się do rozdzielczości ekranu, więc są spełnione warunki - dostosowuje się...

powyżej 1000px strona wczytuje się standardowo

600-1000px divy w klasie menu pobierają 20% szerokości pojemnika menu

400-600px divy w klasie menu układają się pod sobą i przyjmują 60% matki- menu

a mniej niż 400 warianty w menu teraz się zmniejszają, ale będą przechodzić w okienko rozwijane.

////CAŁY CZAS MÓWIĘ O DRUGIM KODZIE KTÓRY WSTAWIŁEM////

Czy to nie są spełnione warunki responsywności?

A jeśli nie, to czym do cholery jest responsywność, czy trzeba użyć jakiejś innej technologii żeby uzyskać podobny efekt i żeby można nazwać to RWD?

Czy nie jest tak, że jeśli coś działa i spełnia swoją funkcję to jest to dobre rozwiązanie? Kodu nie ma wiele...