Pytanie o responsywność.

pytanie zadane 1 listopada 2015 w JavaScript przez A_C Użytkownik (880 p.)

Bawię się z responsywnością na urządzeniach mobilnych, na samym początku natrafiłem na taki problem; nie chciały mi działać wartości %, jeżeli określałem w px div się pojawiał. Długo nad tym myślałem i zrobiłem tak, że określiłem jako 100% html, body. Jednak gdy dodałem do tego diva określonego w % ze zmianą koloru tła, tak by dla sprawdzenia ukazał zmianę nic się nie dzieje, jeżeli zamieniam z % na px zmiana następuje. Co to może być?

*{box-sizing: border-box;}

@media only screen and (max-width:680px);
{
	
	
}
  
  html, body
	{
		width: 100%;
		height: 100%;
        position: absolute;
		overflow: hidden;
		background-color: #cc0033;
		
	}


#kontener
	{
		width: 80 %;
		height: 80 %;
		background-color: #ff99cc;
		margin: auto;
	}

</head>
  <body ng-app="starter", onload="function(word, i)">
  
    <ion-pane>
      <ion-header-bar class="bar-stable">
       
      </ion-header-bar>
      <ion-content>
	  
	  <div id = "kontener">
	  
	  
	  </div>
	  
      </ion-content>
    </ion-pane>
  </body>
</html>

2 odpowiedzi

odpowiedź 1 listopada 2015 przez Boulderdash Początkujący (420 p.)

Usuń spację między wartością, a znakiem %


#kontener
    {
        width: 80%;
        height: 80%;
        background-color: #ff99cc;
        margin: auto;
    }

komentarz 1 listopada 2015 przez A_C Użytkownik (880 p.)

Nie działa dalej nawet po usunięciu spacji. Cała strona ma wartości przypisane ogólnie, diva kontener nie widać, dałem dla tego 80% roboczo by widać jak przysłania tylko część strony.

komentarz 1 listopada 2015 przez Boulderdash Początkujący (420 p.)

Hm. Może źle rozumiem to co napisałeś więc dopytam. Gdy podajesz width, height #kontener w px to działa, a w % nie działa? I chcesz tylko wyświetlić ten div, tak?

komentarz 1 listopada 2015 przez A_C Użytkownik (880 p.)

Tak, robię tylko podmianę w kodzie z % na px w kontener i taki prostokąt (roboczy) się pojawia. Jeżeli pozostaje w określeniu % nic się nie dzieje. Tak jak by była jeszcze dodatkowa zasada, o której osoba początkująca nie wie.

komentarz 2 listopada 2015 przez Boulderdash Początkujący (420 p.)

Jaka przeglądarka? Jaki system? Na dowód tego, że to jednak działa proszę:
http://jsfiddle.net/Boulderdash/bhcsq06v/

Zarówno na fiddle jak i bezpośrednio u mnie - Chrome, Firefox, Edge. Taki miał być efekt?

komentarz 2 listopada 2015 przez A_C Użytkownik (880 p.)

Tak sam to zauważyłem, że na zwykłej templatce to działa. U mnie nie działa w środowisku do androida. Zapewne coś się gryzie w samym kodzie.

odpowiedź 1 listopada 2015 przez Else Stary wyjadacz (12,260 p.)

Tak na marginesie dodam, że jeśli chcesz tworzyć responsywne strony to warto zainterestować się jakimś frameworkiem np. bootstrap. Tam fajnie jest to rozwiązane. Strona jest przedstawiona jako siatka którą można podzielić na 12 kolumn. Sam zaczołem to wykorzystywać, bo po co tworzyć od nowa koło. Jeszcze link https://webmastah.pl/10-najlepszych-frameworkow-css/

komentarz 1 listopada 2015 przez Boulderdash Początkujący (420 p.)

Jeśli chcesz się dobrze nauczyć kodowania, responsywności, wykorzystania css, jquery, js to nie frameworkami tylko od zera. Jak opanujesz wszystko porządnie wtedy weź framework. Ludzie zaczynają od końca, a potem jak jest coś do zrobienia poza zakresem frameworka to robią duże oczy :)

komentarz 1 listopada 2015 przez A_C Użytkownik (880 p.)

Tak, chcę to poznać od zera, od zera by to rozumieć, a nie tylko podmieniać.

komentarz 1 listopada 2015 przez writen Nałogowiec (29,060 p.)

A po co wszędzie pchać te frameworki? Myślę, że napisanie własnego grid systemu to jest coś co każdy front-endowiec powinien zrobić minimum raz w życiu. Raz wystarczy i będzie ci to towarzyszyć już w każdym projekcie. Nie jest to w żaden sposób trudne.

Frameworki są dobre dla back-endowców, którzy potrzebują wykonać jakiś szybki interfejs.