Веб-дамытуу үчүн медиа суроолор кандай иштейт…

Медиа-талаптар белгилүү бир CSS стилилерин түзмөктүн мүнөздөмөлөрүнө же көрүү аймагына жараша колдонууга мүмкүндүк берет. Алар адаптивдүү дизайн түзүү үчүн колдонулат, ал ар кандай экрандарда, мобилдик түзмөктөрдө, планшеттерде жана десктоптордо туура көрсөтүлөт.

Медиа-талаптын негизги синтаксиси:

@media <медиа_тип> and (<белгисиз>) {
  /* CSS эрежелери */
}

<медиа_тип> талап кайсы түзмөк түрүнө колдонулушун аныктайт (мисалы, screen, print, all).
<белгисиз> шарттарды белгилейт, кайсы учурда стильдер колдонулат (мисалы, кеңдик, бийиктик, экрандын багыты, чечим).

Танымал өрнөктөр:

min-width: Стильдер көрүү аймагынын кеңдиги белгиленген мааниге же андан чоң болсо колдонулат.
max-width: Стильдер көрүү аймагынын кеңдиги белгиленген мааниге же андан кичине болсо колдонулат.
orientation: Стильдер экрандын багтына жараша колдонулат (portrait же landscape).
resolution: Стильдер экрандын чечимине жараша колдонулат.

Мисалдар:

Мобилдик түзмөктөр үчүн max-width колдонуу:

/* Базалык стильдер */
body {
  font-size: 16px;
}

/* 768px чейин кеңдикке чейин стильдер (мобилдиктер үчүн типтүү) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Десктоп үчүн min-width колдонуу ("мобилден баштап" ыкмасы):

/* Мобилдиктер үчүн стильдер */
.column {
  width: 100%;
}

/* 992px жана андан жогору кеңдикке ээ экрандар үчүн */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Өрнөктөрдүн аралашмасы:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Планшеттер үчүн гана */
}

@media screen and (orientation: landscape), print {
  /* Ландшафттык багыттагы экрандар жана басып чыгаруу үчүн */
}

viewport мета-теги мобилдик түзмөктөрдө медиа талаптардын туура иштеши үчүн маанилүү:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width көрүү аймагынын кеңдигин түзмөктүн кеңдигине барабар кылат.
initial-scale=1.0 баштапкы масштабды белгилейт.

Бул мета-тегсиз көп мобилдик браузерлер бетти автоматтык түрдө масштабдайт, реалдуу түзмөк кеңдигин эске албайт, бул адаптацияны бузат.

Веб-дамытуу үчүн медиа суроолор кандай иштейт, мобилдик түзмөктөрдү камтыган адаптивдүү дизайн үчүн?