რა არის გვერდის ადაპტური ვერსია?

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

ძირითადი პრინციპები:

• მოძრავი გრაფიკი (Fluid Grids): ელემენტების ზომების განსაზღვრა პროცენტული ან სხვა ურთიერთმნიშვნელოვანი ერთეულებით, ფიქსირებული პიქსელების ნაცვლად.
• მოძრავი სურათები (Flexible Images): სურათების პროპორციული გადიდება ან შემცირება, რათა ისინი არ გადაცდენენ კონტეინერის საზღვრებს.
• მედია სვეტები (Media Queries): CSS წესები, რომლებიც საშუალებას აძლევენ სხვადასხვა სტილების გამოყენებას მოწყობილობის მახასიათებლების მიხედვით, როგორიცაა ეკრანის სიგანე, სიმაღლე, მიმართულება და განჭვირვალობა.

CSS-ში media query-ის გამოყენების მაგალითი:

/* საერთო სტილები ყველა მოწყობილობისთვის */
body {
    font-size: 16px;
}

/* სტილები 768px-მდე სიგანეზე ეკრანებისთვის (მაგ., ტაბლეტები და მობილურები) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* ნავიგაციის განლაგების ცვლილების მაგალითი */
        display: flex;
        flex-direction: column;
    }
}

/* სტილები 480px-მდე სიგანეზე ეკრანებისთვის (მაგ., მობილური ტელეფონები) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* სურათები იკავებენ კონტეინერის მთელ სიგანეს */
        max-width: 100%;
        height: auto;
    }
}

პასუხის დიზაინის მიზანია უზრუნველყოს საიტის გამოყენების კომფორტი ნებისმიერ მოწყობილობაზე, გვერდების ცალკე ვერსიების შექმნის გარეშე.

ტესტირება მოიცავს:

• ელემენტების სწორად ჩვენებას სხვადასხვა განზომილებებზე;
• ნავიგაციის და ინტერაქციის სიმარტივეს;
• ჰორიზონტალური სლაიდერის არარსებობას;
• ტექსტის წაკითხულობას;
• გვერდის ჩატვირთვის სიჩქარეს.