A <div> egy blokkszintű (block) objektum, ami azt jelenti, hogy mindig új sorban kezdődik, és kihasználja a teljes rendelkezésre álló szélességet. Ezzel szemben a <span> egy sorszintű (inline) elem, tehát nem kezdődik új sorban, és szélessége is csak akkora, mint amekkora helyre szüksége van.
A <div> és <span> tagek mellé, a HTML5 szabványban új, szemantikus jelentéssel bíró strukturális elemeket vezettek be:
<header>...</header>: az oldal vagy egy tartalmi egység fejléce<footer>...</footer>: az oldal vagy egy tartalmi egység lábléce<nav>...</nav>: navigációs menü<aside>...</aside>: érintőlegesen kapcsolódó tartalom (jellemzően oldalsáv)<main>...</main>: fő tartalom<section>...</section>: logikai egység<article>...</article>: önálló tartalom.
A fenti tagek kivétel nélkül blokkszintű (block) elemek, a <div>-hez hasonlóan.
Ezek a tagek - az általános célú <div> és <span> tagekkel ellentétben - szemantikai jelentéssel bírnak, tehát egyértelműen meghatározzák a tartalmuk jelentését (pl. egy <nav>-ról tudjuk, hogy valamilyen navigációt valósít meg).
A HTML5-ben bevezetett szemantikus tageket felhasználva precízebben leírhatjuk egy weboldal szerkezetét.
Média Lekérdezések (Media Queries)
A média lekérdezések a webes dizájn egyik alapvető eszközei, amelyek lehetővé teszik, hogy a weboldal megjelenése alkalmazkodjon a különböző eszközökhöz és képernyőméretekhez. Ez segít abban, hogy a weboldal minden eszközön jól nézzen ki, és optimális felhasználói élményt nyújtson.
1. Média Lekérdezések Alapjai
A média lekérdezések a CSS-ben találhatóak, és a @media szabály segítségével alkalmazhatók. Az alap szintaxis a következő:
@media [feltételek] {
/* Itt adhatók meg a stílusok */
}
A feltételek általában a képernyő szélességére, magasságára vagy egyéb jellemzőkre vonatkoznak.
2. Média Lekérdezések Típusai
2.1. Szélesség és Magasság
A leggyakoribb feltételek a képernyő szélességére és magasságára vonatkoznak. Használhatjuk a min-width, max-width, min-height, és max-height kifejezéseket:
/* Nagy képernyők esetén (szélesség legalább 1024px) */
@media (min-width: 1024px) {
body {
background-color: lightblue;
}
}
/* Kis képernyők esetén (szélesség legfeljebb 768px) */
@media (max-width: 768px) {
body {
background-color: lightcoral;
}
}
2.2. Tájolás
A orientation feltétel a képernyő tájolását jelzi, amely lehet portrait (álló) vagy landscape (fekvő):
/* Álló tájolás esetén */
@media (orientation: portrait) {
body {
font-size: 16px;
}
}
/* Fekvő tájolás esetén */
@media (orientation: landscape) {
body {
font-size: 18px;
}
}
2.3. Felbontás
A resolution feltétel a képernyő felbontását jelzi DPI (dots per inch) vagy DPCM (dots per centimeter) egységekben:
/* Magas felbontású képernyők (pl. Retina kijelzők) */
@media (min-resolution: 192dpi) {
img {
width: 50%;
}
}
3. Média Lekérdezések Kombinálása
Több média lekérdezés kombinálható egyetlen szabályblokkban, hogy több feltételt is figyelembe vegyünk:
/* Képernyő, amely legalább 768px széles, és tájolása álló */
@media (min-width: 768px) and (orientation: portrait) {
.container {
width: 50%;
}
}
4. Média Lekérdezések Használata a Weboldal Reszponzív Tervezésében
A reszponzív webdizájn során a média lekérdezések kulcsszerepet játszanak a weboldalak alkalmazkodó képességében. Kövesd az alábbi lépéseket a hatékony reszponzív tervezéshez:
- Alap Stílusok Meghatározása: Határozd meg a weboldal alapértelmezett stílusait, amelyek az asztali képernyőkre vonatkoznak.
- Média Lekérdezések Alkalmazása: Adj hozzá média lekérdezéseket a CSS fájlhoz, hogy a stílusok alkalmazkodjanak a kisebb képernyőkhöz és különböző eszközökhöz.
- Tesztelés és Finomhangolás: Teszteld a weboldalt különböző eszközökön és képernyőméreteken, és finomítsd a média lekérdezéseket a legjobb felhasználói élmény érdekében.
Egyszerű Reszponzív Weboldal példa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reszponzív Weboldal</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
/* Nagy képernyők */
@media (min-width: 1024px) {
.container {
background-color: lightblue;
}
}
/* Kis képernyők */
@media (max-width: 768px) {
.container {
background-color: lightcoral;
width: 95%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Üdvözöllek a reszponzív weboldalon!</h1>
<p>Ez a weboldal alkalmazkodik a képernyő méretéhez.</p>
</div>
</body>
</html>
Nincsenek megjegyzések:
Megjegyzés küldése