• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pytanie o responsywność.

VPS Starter Arubacloud
0 głosów
216 wizyt
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

0 głosów
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.
–2 głosów
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.

Podobne pytania

0 głosów
4 odpowiedzi 354 wizyt
pytanie zadane 28 listopada 2015 w HTML i CSS przez MatiiTv Gaduła (3,790 p.)
0 głosów
1 odpowiedź 294 wizyt
pytanie zadane 9 grudnia 2015 w HTML i CSS przez keyram Obywatel (1,540 p.)
0 głosów
1 odpowiedź 356 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...