Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [CSS]Wersja dla strony na komórkę

Napisany przez: david8213 14.06.2019, 10:30:46

Dlaczego wyświetla mi zawartość DIVa zarówno na komórce jak i na laptopie skoro jest warunek :

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/style.html>
  2.  
  3. @media (max-width: 1023px) {
  4.     #sidebar {display: none;
  5.  
  6.   font-size: 13px;
  7.   margin: 0 auto;
  8.   background: rgba(0, 0, 0, 0.4);
  9.   color: white;
  10.   max-width: 380px;
  11.   height: 120px;
  12.   text-align: center;
  13.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  14. }
  15. </http://december.com/html/4/element/style.html>
  16.  
  17. <http://december.com/html/4/element/body.html>
  18. <http://december.com/html/4/element/div.html class="sidebar">  tekst </http://december.com/html/4/element/div.html>
  19. </http://december.com/html/4/element/body.html>
[HTML] pobierz, plaintext

Napisany przez: Lord 14.06.2019, 10:39:15

Cytat(david8213 @ 14.06.2019, 11:30:46 ) *
Dlaczego wyświetla mi zawartość DIVa zarówno na komórce jak i na laptopie skoro jest warunek :

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/style.html>
  2.  
  3. @media (max-width: 1023px) {
  4.     #sidebar {display: none;}
  5. }
  6.  
  7. .sidebar {
  8.   font-size: 13px;
  9.   margin: 0 auto;
  10.   background: rgba(0, 0, 0, 0.4);
  11.   color: white;
  12.   max-width: 380px;
  13.   height: 120px;
  14.   text-align: center;
  15.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  16. }
  17. </http://december.com/html/4/element/style.html>
  18.  
  19. <http://december.com/html/4/element/body.html>
  20. <http://december.com/html/4/element/div.html class="sidebar">  tekst </http://december.com/html/4/element/div.html>
  21. </http://december.com/html/4/element/body.html>
[HTML] pobierz, plaintext


bo #sidebar to nie to samo co .sidebar

Napisany przez: david8213 14.06.2019, 10:58:24

Zrobiłem jak ponizej i dalej tekst wyświetlany jest na smartfonie. Gdzie smartfon szerokość ma 720 a laptop 1080
Na komórce wyświetla mi tekst na szaro. Nie powinien w ogóle wyświetlić tekstu.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <http://december.com/html/4/element/html.html>
  3. <http://december.com/html/4/element/head.html>
  4. <http://december.com/html/4/element/style.html>
  5. body { 
  6.    font-family: Arial;
  7.    color: grey;
  8. }
  9.  
  10. @media (max-width: 721px) {
  11.     .bar {
  12.     display: none;
  13.   }
  14. }
  15.  
  16. @media (min-width: 1023px) {
  17.     .bar {
  18.     display: block;
  19.     color: blue;
  20.  }
  21. }
  22.  
  23. </http://december.com/html/4/element/style.html>
  24.  
  25. <http://december.com/html/4/element/body.html>
  26. <http://december.com/html/4/element/div.html class="bar"> tekst </http://december.com/html/4/element/div.html>
  27.  
  28. </http://december.com/html/4/element/body.html>
  29. </http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext



Znalazłem czego brakowało:

W head trzeba wstawić 

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/meta.html name="viewport" content="width=device-width; initial-scale=1.0">
[HTML] pobierz, plaintext


to dla tych którzy moze kiedyś będą tego szukać

Napisany przez: Lord 14.06.2019, 11:58:13 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <http://december.com/html/4/element/html.html>
  3. <http://december.com/html/4/element/head.html>
  4. <http://december.com/html/4/element/meta.html name="viewport" content="width=device-width, initial-scale=1.0">
  5.  
  6. <http://december.com/html/4/element/style.html>
  7. body { 
  8.    font-family: Arial;
  9.    color: grey;
  10. }
  11.  
  12. @media (max-width: 721px) {
  13.     .bar {
  14.     display: none;
  15.     color: red;
  16.  }
  17. }
  18.  
  19. @media (min-width: 1023px) {
  20.     .bar {
  21.     display: block;
  22.     color: blue;
  23.  }
  24. }
  25.  
  26. </http://december.com/html/4/element/style.html>
  27.  </http://december.com/html/4/element/head.html>
  28. <http://december.com/html/4/element/body.html>
  29. <http://december.com/html/4/element/div.html class="bar"> tekst </http://december.com/html/4/element/div.html>
  30.  
  31. </http://december.com/html/4/element/body.html>
  32. </http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext

Napisany przez: dublinka 14.06.2019, 12:10:52

Cytat(david8213 @ 14.06.2019, 10:58:24 ) *
Znalazłem czego brakowało:

W head trzeba wstawić 

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/meta.html name="viewport" content="width=device-width; initial-scale=1.0">
[HTML] pobierz, plaintext


to dla tych którzy moze kiedyś będą tego szukać

Przecież od tego się zaczyna.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)