საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში

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

რესპონსიული დიზაინის ასაწყობად CSS-ში გამოიყენება @meda წესი, რომლის დახმარებითაც შეგვიძლია ჩვენს CSS-ს ვუკარნახოთ თუ რომელი ზომის ეკრანზე როგორ მოიქცეს.

ბრაუზერების მხარდაჭერა

თვისება	google chrome	edge	mozilla firefox	safari	opera
@media	21	9	3.5	4.0	9

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

მნიშვნელობები not, only და and საკვანზო სიტყვების (keywords)

not: ქივორდი აბრუნებს მთლიანად მედია ქვერის მნიშვნელობას

only: ქივორდი ბლოკავს ძველ ბრაუზერებს, რომლებსაც არ აქვთ მედია ქვერის თვისებების მხარდაჭერა. მას არ აქვს ეფექტი თანამედროვე ბრაუზერებში

and: ქივორდი აერთიანებს ყველა მედია ტიპის მნიშვნელობას მედია ტიპებთან ან თვისებებთან.

ისინი არიან არჩავადები (optional). თუმცა თუ ჩვენ ვიყენებთ not ან only, ქივორდებს ჩვენ უნდა განვსაზღვროთ მედიის ტიპი

თქვენ ასევე შეგიძლიათ მედია ქვერი გამოიყენოთ html-ში, იქ სადაც ვაბავთ კონკრეტულ სტილს ჩვენს დოკუმენტს

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

მედია ტიპები

მნიშვნელობა	აღწერა
all	საწყისი. გამოიყენება ყველა ტიპის მედია მოწყობილობასთან
print	გამოიყენება პრინტერებისთვის
screen	გამოიყენება კომპიუტერის ეკრანებისთვის, ტაბლეტებისთვის, სმარტფონებისთვის და ა.შ.
speech	გამოიყენება screenreaders-ებთან (ხმოვან წამკითხველებთან)

/* body-ის ვანიჭებთ tan ფერს */
body {
  background-color: tan;
}

/* ეკრანებზე, რომლებზეც ეკრანის ზომა არის 992 პიქსელი, ან ნაკლები ფონის ფერი ხდება blue-ლურჯი */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* ეკრანებზე, რომლებზეც ეკრანის ზომა არის 600 პიქსელი ან ნაკლები, ფონის ფერი ხდება olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}