Назария

Тартиби мутобиқшаванда

Ин барои чӣ лозим аст

Зиёда аз нисфи одамон сайтҳоро аз телефон мекушоянд. Бари экрани телефон 360–430 пиксел, планшет — тақрибан 800, ноутбук — 1300 ва зиёда. Тартиби мутобиқшаванда — вақте ҳамон як саҳифа дар ҳар кадоми онҳо қулай менамояд: дар компютер се сутун, дар телефон як, меню ба тугма табдил меёбад. Google ҳатто сайтҳои мутобиқнашавандаро дар ҷустуҷӯ поёнтар мегузорад.

Мета-теги viewport

Бе он телефон худро чунин вонамуд мекунад, ки экранаш 980px аст, ва сайтро майда, мисли компютер нишон медиҳад. Бинобар ин дар <head>-и ҳар саҳифа менависанд:

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

Ин маънои онро дорад: «бари саҳифа = бари экрани дастгоҳ, миқёс 1:1». Бе ин сатр медиадархостҳо дар телефон дуруст кор намекунанд.

Воҳидҳои нисбӣ

Пиксел (px) — воҳиди сахт: 300px — ҳамеша 300px, ҳатто дар экрани 320-пикселӣ. Бинобар ин дар тартиби мутобиқшаванда аксар вақт воҳидҳои нисбӣ-ро истифода мебаранд:

Воҳид	Аз чӣ ҳисоб мешавад
`%`	аз андозаи волид
`em`	аз андозаи ҳарфи ҳамин унсур
`rem`	аз андозаи ҳарфи реша (`html`), одатан 16px
`vw`	1% аз бари равзана (viewport width)
`vh`	1% аз баландии равзана

html { font-size: 16px; }
h1 { font-size: 2rem; }      /* 32px */
.btn { padding: 0.5em 1em; } /* фосилаҳо бо ҳарфи тугма калон мешаванд */
.hero { height: 100vh; }     /* баннер ба тамоми экран */
.col { width: 50%; }         /* нисфи волид */

Натиҷа: сарлавҳа 32px; тугма бо ҳарфи калон худаш фосилаҳои калонтар дорад; баннер дақиқ ба баландии равзана.

rem барои ҳарфҳо қулай аст: агар корбар дар танзимоти браузер ҳарфро калон карда бошад — тамоми саҳифа бо тартиб калон мешавад.

Расмҳои чандир

Расми 800px дар сутуни 300px аз канор берун мебарояд. Бо ду сатр ислоҳ мешавад:

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

Натиҷа: расм ҳеҷ гоҳ аз волид васеътар нест; дар экрани танг он хурд мешавад, таносубро нигоҳ дошта.

Медиадархостҳо

Медиадархост — қоидаҳои CSS, ки танҳо ҳангоми шарт кор мекунанд:

.menu { display: none; }

@media (min-width: 600px) {
  .menu { display: flex; }
}

Натиҷа: дар экранҳои аз 600px тангтар меню пинҳон аст, аз 600px ва васеътар — нишон дода мешавад.

min-width: 600px — «бари равзана аз 600px»;
max-width: 599px — «бари равзана то 599px».

Дар дохили @media { … } — қоидаҳои оддии CSS. Онҳо ҳамон қоидаҳои болоиро аз рӯи каскад мепӯшонанд (медиадархостҳоро баъд аз қоидаҳои асосӣ менависанд).

Mobile first

Ду равиш ҳаст:

mobile first (аввал телефон): қоидаҳои асосӣ — барои экрани танг, медиадархостҳои min-width бошанд дар экранҳои васеъ сутунҳо илова мекунанд;
desktop first: баръакс, асос — барои компютер, max-width бошад барои телефон содда мекунад.

Ҳоло mobile first қабул шудааст: дар телефон сайт содда ва зуд аст, мураккабӣ бошад дар он ҷое илова мешавад, ки ҷой ҳаст.

.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

Натиҷа: дар телефон як сутун, дар планшет ду, дар экрани калон чор.

Нуқтаҳои шикасти маъмул (breakpoints): 600px (телефони калон/планшет), 900px (планшет/ноутбук), 1200px (экрани калон). Аммо беҳтар аст онҳоро он ҷое гузорӣ, ки ба тартиби ту танг мешавад.

Инро чӣ тавр санҷидан

Дар браузер F12 ва нишонаи телефонро («Toggle device toolbar») пахш кун — iPhone-ро интихоб кардан ё ҳар барро додан ва дидан мумкин, ки саҳифа чӣ тавр аз нав сохта мешавад. Ё танҳо равзанаро бо муш танг кун.

Дар дохил чӣ тавр кор мекунад

Ҳангоми ҳар тағйири андозаи равзана браузер шартҳои ҳамаи медиадархостҳоро аз нав месанҷад. Қоидаҳои дархостҳои мувофиқ дар каскад иштирок мекунанд, номувофиқ — гӯё вуҷуд надоранд. Бинобар ин ҳангоми гардондани телефон тартиб фавран аз нав сохта мешавад.

Хатоҳои маъмул

Мета-теги viewport нест. Дар телефон сайт майда аст, медиадархостҳо «кор намекунанд».
Медиадархост болотар аз қоидаи асосӣ. Қоидаи асосии поёнӣ онро мепӯшонад. @media-ро дар охир навис.
Тартиби min-width баръакс. Агар 900px пеш аз 600px ояд, дар экрани васеъ қоида барои 600px ғолиб мешавад.
Бари собит бо px. width: 1000px — дар телефон гардониши уфуқӣ пайдо мешавад. max-width: 1000px ва фоизҳоро истифода бар.
Фосила дар шарт. @media (min-width:600 px) — байни адад ва px набояд фосила бошад.

Ёддошт

Код	Чӣ кор мекунад
`<meta name="viewport" content="width=device-width, initial-scale=1">`	миқёси муқаррарӣ дар телефон
`%`, `em`, `rem`, `vw`, `vh`	воҳидҳои нисбӣ
`img { max-width: 100%; height: auto; }`	расмҳои чандир
`@media (min-width: 600px) { … }`	қоидаҳо аз 600px ва васеътар
`@media (max-width: 599px) { … }`	қоидаҳо то 599px
mobile first	асос — барои телефон, `min-width` бо тартиби афзоиш