გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

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

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

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

რესპონსიული დიზაინის ასაწყობად 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;
  }
}

კურსში შემავალი თემები

კომენტარები 0

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (header, nav, footer), ცოტა რამ display:flex-ზე საიტის აწყობა, როგორ მუშაობს CSS flexbox (display: flex;) საიტის აწყობა (ბლოგის გვერდი, ნაწილი #1) Git-ის დაყენება Windows-ზე Linux-ის ძირითადი ბრძანებები ვებ-დეველოპმენტისთვის CSS position property, ვისწავლოთ CSS პოზიციები ფონტების მიბმა საიტზე, როგორ მივაბათ ფონტები CSS @import and CSS variables, იმპორტი და ცვლადები CSS-ში html tables, ცოტა რამ ცხრილების შესახებ როგორ შევქმნათ და ავტვირთოთ პროექტი Git-ზე ბლოგის გვერდი #2, ვაწყობთ ქარდებს display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ display:grid-ის საზომი ერთეულები fr-ები (fractions) ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით ბლოგის დეტალური გვერდის დასრულება კონტაქტის გვერდის დასრულება დახმარების გვერდის დასრულება საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში საიტის აწყობა: რესპონსივი, მთავარი გვერდი საიტის აწყობა: მობილური ნავიგაცია როგორ გავასწოროთ HTML ელემენტი ცენტრში როგორ გავაკეთო dark theme