@media queries problem

pytanie zadane 25 marca 2024 w HTML i CSS przez oleksik Użytkownik (630 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

odpowiedź 25 marca 2024 przez Comandeer Guru (607,960 p.)

odpowiedź 26 marca 2024 przez VBService Ekspert (256,580 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 ]