ნაწილობრივ ადაპტირებული "წითელი" საიტი

სულ რამოდენიმე წლის წინ მობილურებისათვის ცალკე დამოუკიდებელი საიტი იქმნებოდა, ე.წ. "ვაპ" საიტები. ამჟამად კი მობილურების, სმარტფონების და დესკტოპებისათვის იქმნება ერთი საიტი, რომელიც მორგებულია სხვადასხვა ზომის ეკრანებისათვის. ასეთ საიტებს ადაპტირებული ეწოდება. 
   ჩვენი სავარჯიშო "წითელი" საიტი არ იყო გათვალისწინებული სხვადასხვა ზომის ეკრანისთის, ის ფიქსირებული სიგანის იყო. გადავწყვიტე თქვენთვის ადაპტირებული საიტების გაკეთების შესახებ წარმოდგენის შესაქმნელად გადამეკეთებინა ადაპტირებულ საიტად. ამისათვის ყველა ძირითადი ბლოკის სიგანე გამოვსახე პროცენტებით, თან მივუთითე მაქსინალური სიგანე. შემდეგ ე.წ. მედია მიმართვის (media query) საშუალებით ეკრანის სხვადასხვა ზომებზე შევცვალე სტილები. და ბოლოს .html ფაილში გავუწერე სპეციალური მეტა ტეგი.
  მიღებული საიტის კოდები შეგიძლიათ გადმოწეროთ შემდეგი ლინკიდან: "ადაპტირებული წითელი საიტი"
 
.html ფაილში ჩამატებული მეტა-ტეგია:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
ხოლო სტილებში media query გამოყენებულია ორ სიგანეზე:
@media screen and (max-width: 768px){....}
და
@media screen and (max-width: 475px){....}