CSS / Responsive дизайн үндэс

Responsive дизайн үндэс

Responsive дизайн гэдэг нь нэг вэб хуудас аливаа дэлгэцийн хэмжээнд зохицон харагдах арга юм. Гар утас, планшет, компьютер — бүгдэд тохиромжтой байна.

Яагаад responsive байх шаардлагатай вэ?

Монголын интернет хэрэглэгчдийн 80 гаруй хувь гар утасаар ханддаг. Гар утсанд ажиллахгүй сайт хэрэглэгчийг алддаг.

Responsive дизайн гурван үндсэн техникт тулгуурладаг:

  • Fluid layout — тогтмол px-ийн оронд %, fr, em хэрэглэх
  • Flexible image — зураг container-аасаа хэтрэхгүй байх
  • Media query — дэлгэцийн хэмжээгээр өөр CSS ашиглах

Fluid layout

css
/* Муу — тогтмол өргөн, гар утсанд хэтэрнэ */
.container {
  width: 1200px;
}

/* Сайн — container-тай пропорциональ */
.container {
  width: 100%;
  max-width: 1200px; /* том дэлгэц дээр 1200px-ээс хэтрэхгүй */
  margin: 0 auto; /* голд байрлуулах */
}
css
/* Тогтмол оронд харьцаатай хэмжээ */
.sidebar {
  width: 30%; /* px биш % */
}

.main {
  width: 70%;
}

Flexible image

css
/* Бүх зурагт хэрэглэх үндсэн дүрэм */
img {
  max-width: 100%; /* container-аасаа хэтрэхгүй */
  height: auto; /* харьцаа хадгалагдана */
  display: block;
}

Viewport unit — vw ба vh

Viewport гэдэг нь хөтчийн харагдах хэсэг. vw ба vh нь viewport-ийн хэмжээний хувь:

css
.hero {
  width: 100vw; /* viewport-ийн бүтэн өргөн */
  height: 100vh; /* viewport-ийн бүтэн өндөр */
}

.title {
  font-size: 5vw; /* viewport өргөнөөс хамаарсан фонт */
}

Бусад viewport unit-ууд:

css
.element {
  width: 50vw; /* viewport өргөнийн 50% */
  height: 80vh; /* viewport өндрийн 80% */
  font-size: 4vw; /* viewport-тай уян хатан фонт */
  padding: 2vh; /* viewport өндрийн 2% */
}

Desktop-first vs Mobile-first

Desktop-first — том дэлгэцэд зориулж бичээд, жижиг дэлгэцэд max-width-ээр override хийнэ:

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

/* Дараа нь жижиг дэлгэцэд override */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

Mobile-first — гар утасд зориулж бичээд, том дэлгэцэд min-width-ээр нэмнэ:

css
/* Эхлээд гар утас */
.nav {
  display: flex;
  flex-direction: column;
}

/* Дараа нь том дэлгэцэд нэмнэ */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
  }
}

Mobile-first нь илүү зөв арга — дараагийн хичээлд дэлгэрэнгүй үзнэ.

Viewport meta tag — заавал байх ёстой

HTML <head>-д дараах tag байхгүй бол гар утас хуудсыг desktop-ийн хэмжээтэй харуулна:

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • width=device-width — viewport өргөнийг дэлгэцийн өргөнтэй тэнцүүлнэ
  • initial-scale=1.0 — анхны томруулалт 100%

Бодит жишээ — fluid container

css
/* Globals — бүх хуудсанд хэрэглэгдэх */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px; /* гар утас дээр хажуугийн зай */
}

@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }
}

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

@media query-г дэлгэрэнгүй судална — min-width, max-width, orientation, prefers-color-scheme болон стандарт breakpoint утгуудыг практикаар хэрэглэнэ.

← Өмнөх хичээлGrid advancedДараах хичээл →Media query