რესპონსიული დიზაინი ნიშნავს ჩვენი ვებ-გვერდის გამართულად მუშაობას ნებისმიერ მოწყობილობებში, ისეთებში, როგორებიცაა პერსონალური კომპიუტერი, ლეპტოპი, ტაბლეტ კომპიუტერი, ან სმარტფონი
რესპონსიული დიზაინის ასაწყობად 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 | საწყისი. გამოიყენება ყველა ტიპის მედია მოწყობილობასთან |
გამოიყენება პრინტერებისთვის | |
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;
}
}
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით