როგორ მუშაობს მედია სვეტები ვებ-განვითარებაში, მათ შორის მობილური მოწყობილობებისთვის ადაპტირებული დიზაინისთვის?

მედია-დაკითხვები საშუალებას აძლევს გამოიყენოს გარკვეული 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 განსაზღვრავს საწყის მასშტაბირებას.

ამ მეტა-ტეგის გარეშე, ბევრი მობილური ბრაუზერი ავტომატურად მასშტაბირებს გვერდს, უგულებელყოფს რეალურ სიგანეს, რაც არღვევს რეაგირებას.