Méretek: px, em, rem, %, vh  mi ez a fura nyelv?


A CSS-ben minden méret számít. De nem mindegy, hogyan adod meg. A pixel csak a kezdet – jönnek a relatív egységek, amiktől reszponzív leszel, mint egy ninja

 

🧱 Alapegység: px (pixel)

  • A px egy abszolút méret, semmi máshoz nem viszonyul.
  • Pontosan meghatároz egy méretet, függetlenül a képernyő méretétől vagy más elemtől.
  • Minden képernyőn más, mekkora egy pixel, de az arányai változatlanok maradnak.
  • Mindig egybeírjuk a számmal: 16px, 100px

📌 Fix méretezésre jó, de reszponzív (mobilbarát) elrendezéshez nem ideális.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>PX példa</title>
  <style>
    .px-box {
      font-size: 16px;
      padding: 10px;
      border: 2px solid #333;
      background-color: #fef9c3;
      width: 300px;
    }
  </style>
</head>
<body>
  <div class=„px-box”>Ez egy fix méretű (px) doboz.</div>
</body>
</html>

🔠 Relatív méretek: em, rem

em

  • A betűméretéhez viszonyított érték.

  • Ha 1 em = 1 sor magas, akkor 20 em = 20 sor magas.

  • Ha növeled a betűméretet, a hozzá kapcsolódó méret is változik. Próbáld ki a lenti kóddal

rem

  • A root (html) betűméretéhez viszonyított érték.

  • Ha a html-ben a font-size 16px akkor 1 rem = 16px, 2 rem = 32px

  • Akkor hasznos, ha több elem van egymás mellett különböző betűmérettel, de ugyanazt a méretarányt akarjuk tartani.

  • Változtasd a lenti kódban a html betűméretét, és nézd meg, mit csinál a rem dobozod

📌 Használj rem-et, ha biztos akarsz lenni abban, hogy az összes elem azonos alaphoz igazodik.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>EM vs REM</title>
  <style>
    html {
      font-size: 16px;
    }
    .box1 {
      font-size: 30px;
      width: 10em;
      background-color: #d1fae5;
      margin-bottom: 10px;
    }
    .box2 {
      font-size: 20px;
      width: 10rem;
      background-color: #bfdbfe;
    }
  </style>
</head>
<body>
  <div class=„box1”>Ez egy em-méretű doboz</div>
  <div class=„box2”>Ez egy rem-méretű doboz</div>
</body>
</html>

📐 Százalék (%)

 

  • A százalék mindig valamihez viszonyított mérték.

  • Általában a szülőelemhez (parent) viszonyítva értelmezzük.

  • Ha egy div a body-ban van, és a width: 50%, akkor az a body szélességének 50%-át foglalja el.

  • Jelenítsd meg az alábbi kódot és kicsinyítsd, illetve nagyítsd a képernyőd méretét. Figyeld meg, hogyan változik a szöveg és a háttér elrendezése.

📌 Szuper reszponzív elrendezésekhez – különösen, ha fontos, hogy a tartalom mindig arányosan jelenjen meg. 

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Százalékos méretek</title>
  <style>
    .container {
      width: 80%;
      margin: auto;
      background-color: #e0f2fe;
    }
    p {
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <div class=„container”>
    <p>Ez a div a szülőelem (body) szélességének 80%-át foglalja el.</p>
  </div>
</body>
</html>

📱 vh, vw – a viewport barátaid

  • A vw (viewport width): a teljes böngészőablak szélességének 1 %-a

  • A vh (viewport height): a böngészőablak magasságának 1%-a

  • 100vw = teljes szélesség, 50vw = fele

  • Ha egy elem szélessége 66.66vw, akkor a képernyő 2/3-át fogja elfoglalni

📌 Ezek az egységek változnak, ha kicsinyíted vagy nagyítod a böngészőt.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Viewport méretek</title>
  <style>
    .fullscreen-header {
      width: 100vw;
      height: 100vh;
      background-color: #e0f2fe;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    h1 {
      font-size: 5vw;
    }
  </style>
</head>
<body>
  <div class=„fullscreen-header”>
    <h1>Teljes képernyős fejléc</h1>
  </div>
</body>
</html>

📏 vmin, vmax – a legkisebb vagy legnagyobb értékhez igazodva

  • vmin: a kisebbik dimenzió (szélesség vagy magasság) 1%-a

  • vmax: a nagyobbik dimenzió 1%-a

Hasznos lehet dinamikus betűmérethez, hogy mindig olvasható maradjon, akár álló, akár fekvő nézetben nézi valaki a weboldalt.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>vmin és vmax</title>
  <style>
    .responsive-text {
      font-size: 5vmin;
      padding: 20px;
      background-color: #fde68a;
    }
  </style>
</head>
<body>
  <p class=„responsive-text”>Ez a szöveg mindig jól olvasható lesz!</p>
</body>
</html>

Feladat a leckéhez

 

🛠️ Írj egy HTML oldalt, ahol:

  • A cím 4vw méretű
  • A bekezdés 1.2rem
  • A tartalom doboza 60% szélességű
reszponzív méretpróba
Elakadtál?

Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

Egy lehetséges megoldás
<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Méret egységek</title>
  <style>
    html {
      font-size: 16px;
    }
    .doboz {
      width: 60%;
      margin: 0 auto;
    }
    h1 {
      font-size: 4vw;
    }
    p {
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <div class=„doboz”>
    <h1>Responsive méretpróba</h1>
    <p>Ezzel a szöveggel kipróbálhatod, hogyan működnek az em, rem, %, vw és px egységek.</p>
  </div>
</body>
</html>

Készen állsz a következő leckére?

  • Keretezd be, de stílussal

Ha ez túl sok volt:

Hozzászólás írása

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük