HTML / Responsive HTML

Responsive HTML

Responsive дизайн гэдэг нь вэб хуудас гар утас, таблет, компьютер зэрэг ямар ч хэмжээний дэлгэцэнд зөв харагдах технологи юм. CSS-ийн media query үндсэн хэрэгсэл боловч HTML-д ч responsive зургийг зөв оруулах тусгай механизм байдаг.

Viewport meta tag

html
<head>
  <!-- Энэ мөргүй гар утсан дахь хуудас маш жижигхэн харагдана -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

width=device-width нь хуудасны өргөнийг дэлгэцийн бодит өргөнтэй тэнцүүлнэ. initial-scale=1.0 нь анхны томруулалтыг 100% болгоно.

Энэ tag байхгүй бол мобайл хөтөч хуудсыг 980px өргөнтэй гэж тооцоод жижигрүүлж харуулдаг — текст унших аргагүй болдог.

Зургийн responsive үндэс

Энгийн <img> зурагт CSS-д max-width: 100% тохируулвал responsive болно:

html
<img src="зураг.jpg" alt="Тайлбар" style="max-width: 100%; height: auto;" />

Гэхдээ энэ нь том зургийг жижиг дэлгэцэнд ч татаж авна — гар утасны интернетэнд удаан. Үүнийг шийдэхийн тулд srcset ашиглана.

srcset — дэлгэцийн нягтралд тохирох зураг

srcset нь нэг <img>-д олон хэмжээний зураг зааж өгдэг. Хөтөч дэлгэцийн нягтрал болон өргөнөөс хамааран хамгийн тохирохыг татна:

html
<!-- w дескриптор: зургийн бодит өргөнийг заана -->
<img
  src="зураг-800.jpg"
  srcset="
    зураг-400.jpg  400w,
    зураг-800.jpg  800w,
    зураг-1200.jpg 1200w
  "
  alt="Уулзуурын зураг"
/>

Хөтөч дэлгэцийн өргөн болон пиксел нягтралыг харгалзан тохирох хэмжээг автоматаар сонгоно. src attribute нь srcset дэмжихгүй хуучин хөтчүүдэд ашиглагдана.

sizes — зургийн харагдах хэмжээг заах

srcset дан нэрлэхэд хөтөч зургийг viewport-ийн 100% өргөнтэй гэж таамаглана. Гэхдээ зураг зөвхөн баганад харагдах бол sizes ашиглана:

html
<img
  src="зураг-800.jpg"
  srcset="
    зураг-400.jpg  400w,
    зураг-800.jpg  800w,
    зураг-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 50vw,
    33vw
  "
  alt="Гурван баганын зураг"
/>

Тайлбар: sizes-ийн утгыг хөтөч дараалан шалгана:

  • Viewport 600px-ээс бага бол зураг viewport-ийн 100% (100vw)
  • 1200px-ээс бага бол 50%
  • Бусад тохиолдолд 33%

Дараа нь хөтөч тухайн харагдах хэмжээ болон дэлгэцийн DPR (device pixel ratio)-тай тохирох srcset-ийн зургийг сонгоно.

<picture> элемент — уран гар шийдэл

<picture> нь зөвхөн хэмжээ биш, огт өөр зураг харуулах боломж олгодог — жишээ нь нарийн дэлгэцэнд crop хийсэн зураг, өргөн дэлгэцэнд бүтэн зураг:

html
<picture>
  <!-- Нарийн дэлгэцэнд — квадрат crop -->
  <source
    media="(max-width: 600px)"
    srcset="зураг-mobile-400.jpg 400w, зураг-mobile-800.jpg 800w"
  />

  <!-- Дунд дэлгэцэнд -->
  <source
    media="(max-width: 1200px)"
    srcset="зураг-tablet-800.jpg 800w, зураг-tablet-1200.jpg 1200w"
  />

  <!-- Том дэлгэцэнд, default — <img> заавал байна -->
  <img
    src="зураг-desktop-1200.jpg"
    srcset="зураг-desktop-1200.jpg 1200w, зураг-desktop-2400.jpg 2400w"
    alt="Дэлгэцийн хэмжээгээр өөрчлөгдөх зураг"
  />
</picture>

<img> нь <picture> дотор заавал байна — хуучин хөтч болон alt текстэд зориулагдана.

Retina (HiDPI) дэлгэц

Retina дэлгэц нь CSS пикселийн оронд 2x эсвэл 3x физик пиксел ашигладаг. Ердийн зураг бүдэгрэх тул өндөр нягтралтай зураг хэрэгтэй:

html
<!-- x дескриптор: дэлгэцийн DPR-д тохируулна -->
<img
  src="лого.png"
  srcset="лого.png 1x, лого@2x.png 2x, лого@3x.png 3x"
  alt="Лого"
  width="120"
  height="40"
/>

1x — энгийн дэлгэц, 2x — Retina/HiDPI, 3x — гар утасны өндөр нягтрал.

Орчин үеийн формат — WebP, AVIF

html
<picture>
  <!-- AVIF — хамгийн шинэ, хамгийн жижиг хэмжээ -->
  <source type="image/avif" srcset="зураг.avif" />

  <!-- WebP — өргөн дэмжлэгтэй, JPEG-ээс 30% жижиг -->
  <source type="image/webp" srcset="зураг.webp" />

  <!-- JPEG — хуучин хөтчийн fallback -->
  <img src="зураг.jpg" alt="Оновчлогдсон зураг" />
</picture>

Хөтөч дэмждэг хамгийн дээд форматаа сонгоно. AVIF болон WebP нь ижил чанарт JPEG-ээс хамаагүй жижиг хэмжээтэй тул хуудасны ачаалах хурд эрс сайжирна.

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

<template> болон <slot> элементийг судлана — HTML хэлбэрчлэлийг JavaScript-ээр клонлож динамик агуулга үүсгэх, Shadow DOM-ийн үндсийг үзнэ.

← Өмнөх хичээлSVG үндэсДараах хичээл →template ба slot element