რა მიდგომებს იცნობთ ადაპტური დიზაინის შექმნისთვის?

მედია კითხვები: CSS @media წესების გამოყენება მოწყობილობის მახასიათებლების საფუძველზე სტილების მისადაგებლად (ეკრანის სიგანე, სიმაღლე, მიმართულება და სხვა).

/* მედია კითხვების მაგალითი */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}

მოქნილი გრაფიკის განლაგება (Flexible Grid Layout): განლაგების შექმნა ურთიერთდამოკიდებული ერთეულების (%, vw, vh) და მოქნილი თვისებების (flex, grid) გამოყენებით.

/* Flexbox-ის მაგალითი */
.parent {
  display: flex;
  flex-wrap: wrap; /* საშუალებას აძლევს ელემენტებს გადავიდნენ ახალ ხაზზე */
}

.child {
  flex: 1 1 200px; /* საშუალებას აძლევს ელემენტს გაფართოვდეს, შეკუმშოს და ჰქონდეს საწყისი სიგანე */
}

მოქნილი სურათები და მედია: CSS თვისებების max-width გამოყენება სურათებისა და სხვა მედია ელემენტების პროპორციული მასშტაბირებისთვის.

/* მოქნილი სურათის მაგალითი */
img {
  max-width: 100%; /* სურათი არ გადაჭრის მშობელ კონტეინერის სიგანეს */
  height: auto;    /* შენარჩუნება პროპორციები */
}

მობილური-პირველი წინააღმდეგ დესკტოპ-პირველი:

• მობილური-პირველი: სტილი პირველ რიგში განკუთვნილია მობილურ მოწყობილობებისთვის, შემდეგ კი გაფართოვდება დიდი ეკრანებისთვის min-width მედია კითხვების გამოყენებით. ეს საუკეთესო პრაქტიკაა, რადგან მარტივია შეზღუდული რესურსებით მობილურებისთვის სტილიზაცია და აუმჯობესებს შესრულებას.
• დესკტოპ-პირველი: სტილი პირველ რიგში განკუთვნილია დესკტოპებისთვის, შემდეგ კი მცირდება პატარა ეკრანებისთვის max-width მედია კითხვების გამოყენებით.

ფუნქციონალობის გამოვლენა (Feature Detection): JavaScript-ის გამოყენებით ბრაუზერის ან მოწყობილობის შესაძლებლობების განსაზღვრა (მაგალითად, ტაჩ-ინტერფეის მხარდაჭერა) და შესაბამისი სტილების ან ფუნქციონალობის გამოყენება. Modernizr ხელს უწყობს.

რეაგირებადი ტიპოგრაფია: ფონტის ზომის და ხაზის სიმაღლის ცვლილება ეკრანის ზომის მიხედვით, ხშირად ურთიერთდამოკიდებული ერთეულების (em, rem, vw) და მედია კითხვების გამოყენებით.

/* რეაგირებადი ტიპოგრაფიის მაგალითი */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}

სერვერული მხარის გამოვლენა (Server-Side Detection): მოწყობილობის ან ბრაუზერის ტიპის განსაზღვრა სერვერზე და შესაბამისი გვერდის ან სტილების გაგზავნა. ეს ნაკლებად გავრცელებულია თანამედროვე ფრონტენდში.