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

@media queries problem

Object Storage Arubacloud
+1 głos
82 wizyt
pytanie zadane 25 marca w HTML i CSS przez oleksik Użytkownik (590 p.)

Witam, 

Mam problem z media queries mianowicie ustawiłem tak aby przy danej szerokosci wielkość czcionki się zmieniała lecz gdy zmniejszam okno chroma to nic sie nie dzieje. Jedynie nie przesuwa sie i zostaje cały czas na środku. Męczyłem się nad tym już spory kawałek czasu i dalej nie mogę zrozumieć co robie nie tak.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            font-size: large;
        }

        @media (max-width: 992px) {
            body{
                font-size: large;
            }
        }

        @media (min-width: 450px){
            body{
                font-size: xx-large;
            }
        }
    </style>
</head>
<body id="body">
    <center>
        <p>
            NAPIS
        </p>
    </center>
</body>
</html>

 

2 odpowiedzi

+1 głos
odpowiedź 25 marca przez Comandeer Guru (599,930 p.)

Hm, wielkość fonta się zmienia. Dopóki okno jest poniżej rozmiaru 992px, to font jest ustawiony na wielkość large (z powodu pierwszego media query). W momencie, gdy okno (czy też dokładniej: viewport) jest powyżej 992px – wówczas łapie się drugie media query i font jest ustawiany na xx-large.

0 głosów
odpowiedź 26 marca przez VBService Ekspert (252,520 p.)

AFAIK kolejność ma znaczenie w przypadku @media

Overriding

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

... media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps unintuitively.

 

[ kod przykładu on-line ]

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      body{
        font-size: medium;
      }
      /* Non-Mobile First Method */
      @media (max-width: 900px) {
        body{
          font-size: large;
        }
      }
      @media (max-width: 450px) {
        body{
          font-size: xx-large;
        }
      }      

      /* dla prezentacji */
      body {
        margin: 0;
        padding: 0;        
      }
      .container {
        position: fixed;
        top: 0; left: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100vh;
        border: 5px solid red;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }
      .container pre {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <pre>
 Lorem ipsum
 width: <span id="width"></span>
 font-size: <span id="font-size"></sapn>
      </pre>
    </div>

    <script>
      document.body.onresize = _=> {
        const w = document.querySelector('pre #width'),
              fs = document.querySelector('pre #font-size');
        w.textContent = document.body.clientWidth + 'px';
        fs.textContent = window.getComputedStyle(document.body).fontSize;
      };
      window.onload = _=> {
        window.dispatchEvent(new Event('resize'));
      };
    </script>
  </body>
</html>

 

A Complete Guide to CSS Media Queries ]

Podobne pytania

0 głosów
2 odpowiedzi 277 wizyt
pytanie zadane 5 kwietnia 2017 w HTML i CSS przez Zacherini Użytkownik (510 p.)
+1 głos
1 odpowiedź 2,248 wizyt
–1 głos
1 odpowiedź 472 wizyt
pytanie zadane 21 listopada 2018 w HTML i CSS przez Artur Koniec Gaduła (3,670 p.)

92,524 zapytań

141,357 odpowiedzi

319,384 komentarzy

61,914 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...