Ինչպես են աշխատում մեդիա հարցումները վեբ զարգացման մեջ՝ պատասխանատու դիզայնի համար, ներառյալ մոբայլ սարքերը?

Մեդիա հարցումները թույլ են տալիս կիրառել որոշ 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;
  }
}

Արտահայտությունների համակցում՝ and, or (որը նշվում է ստորակետով,) և not՝

@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 սահմանում է սկզբնական մասշտաբը։

Բացակայում այս մետա-տեգի, շատ մոբայլ բրաուզերներ ավտոմատ կերպով մեծացնում են էջը՝ անտեսելով իրական սարքի լայնությունը, ինչը խանգարում է հարմարեցվածությանը։