CSS / Media query

Media query

Media query нь дэлгэцийн хэмжээ, чиглэл, хэрэглэгчийн тохируулгаас хамаарч өөр өөр CSS ажиллуулах механизм юм. Responsive дизайны гол хэрэгсэл.

Үндсэн синтакс

css
@media (нөхцөл) {
  /* Нөхцөл үнэн бол энэ CSS ажиллана */
  .element {
    property: value;
  }
}

min-width — доод хязгаараас дээш

Viewport дор хаяж заасан өргөнтэй болоход CSS ажиллана. Mobile-first аргад хэрэглэнэ:

css
/* Анхдагч: бүх дэлгэцэд */
.card {
  font-size: 14px;
}

/* 768px ба түүнээс өргөн дэлгэцэд */
@media (min-width: 768px) {
  .card {
    font-size: 16px;
  }
}

/* 1024px ба түүнээс өргөн дэлгэцэд */
@media (min-width: 1024px) {
  .card {
    font-size: 18px;
  }
}

max-width — дээд хязгаараас доош

Viewport заасан өргөнөөс бага байхад CSS ажиллана. Desktop-first аргад хэрэглэнэ:

css
/* Анхдагч: том дэлгэц */
.nav {
  display: flex;
  flex-direction: row;
}

/* 768px-ээс бага дэлгэцэд */
@media (max-width: 767px) {
  .nav {
    flex-direction: column;
  }
}

Зөвлөмж: min-width ба max-width хоёрыг хольж хэрэглэхгүй байх нь кодыг уншихад хялбар болгоно. Нэг аргыг сонгоод тогтмол мөрдөнө.

Стандарт breakpoint утгууд

Tailwind CSS-ийн breakpoint-уудыг суурь болгон ашиглавал нийтлэг тохиролцоо сахигдана:

css
/* xs — гар утас (375px хүртэл, анхдагч) */

/* sm — том гар утас */
@media (min-width: 640px) {
}

/* md — планшет */
@media (min-width: 768px) {
}

/* lg — жижиг laptop */
@media (min-width: 1024px) {
}

/* xl — desktop */
@media (min-width: 1280px) {
}

/* 2xl — том дэлгэц */
@media (min-width: 1536px) {
}

orientation — чиглэл

css
/* Хөндлөн горим */
@media (orientation: landscape) {
  .video-player {
    height: 100vh;
  }
}

/* Босоо горим */
@media (orientation: portrait) {
  .video-player {
    height: 50vh;
  }
}

prefers-color-scheme — dark/light горим

Хэрэглэгчийн систем dark горимд тохируулагдсан эсэхийг шалгана:

css
/* Анхдагч: цайвар горим */
:root {
  --bg: #ffffff;
  --text: #1e293b;
}

/* Систем dark горимд байвал */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --text: #f1f5f9;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
}

Нөхцөлүүдийг хослуулах

css
/* and — хоёр нөхцөл хоёулаа үнэн байх */
@media (min-width: 768px) and (max-width: 1023px) {
  /* зөвхөн планшет */
}

/* , (таслал) — нэг нь үнэн байхад хангалттай (OR) */
@media (max-width: 480px), (orientation: portrait) {
  /* гар утас эсвэл босоо чиглэл */
}

/* not — урвуу нөхцөл */
@media not (min-width: 768px) {
  /* 768px-ээс бага */
}

Бодит жишээ — navigation

css
/* Гар утас: hamburger menu (JS-тэй хамт) */
.nav-links {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.nav-links.open {
  display: flex;
}

.hamburger {
  display: block; /* гар утас дээр харагдана */
}

/* Планшет ба дээш: horizontal navigation */
@media (min-width: 768px) {
  .nav-links {
    display: flex; /* үргэлж харагдана */
    flex-direction: row;
    gap: 24px;
  }

  .hamburger {
    display: none; /* нуугдана */
  }
}

Grid-тэй хослуулах жишээ

css
.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* гар утас: 1 багана */
  gap: 16px;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr 1fr; /* планшет: 2 багана */
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 багана */
    gap: 24px;
  }
}

Дараагийн хичээлд:

Mobile-first дизайны философи ба давуу талыг дэлгэрэнгүй авч үзнэ. min-width media query-г системтэй ашиглан CSS-г хэрхэн зохион байгуулах талаар практикаар судална.

← Өмнөх хичээлResponsive дизайн үндэсДараах хичээл →Mobile-first дизайн