Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Frontend SELF AZ /Mediya-sorğularda dəyişənlər

Mediya-sorğularda dəyişənlər

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

4.1 Əsas konsepsiyalar

CSS-dəyişənlər və media-sorğular müxtəlif ekran ölçüləri və cihazlar üçün avtomatik uyğunlaşan adaptiv veb-dizayn yaratmaq üçün güclü alətlər təmin edir. Dəyişənlər üslubları mərkəzləşdirilmiş şəkildə idarə etməyə imkan yaradır, media-sorğular isə bu üslubları ekranın genişliyi kimi şərtlərə görə dəyişdirməyə imkan verir.

Əsas Konsepsiyalar

  • CSS-dəyişənlər: CSS-də təkrar istifadə olunacaq dəyərləri təyin etməyə imkan verir. Onlar müxtəlif kontekstlərdə, məsələn, media-sorğularında dəyişdirilə bilər ki, bu da xüsusilə adaptiv dizayn üçün çox faydalıdır.
  • Media-sorğular: Cihazın xüsusiyyətlərinə görə, məsələn, ekranın eni və ya hündürlüyünə görə CSS üslublarını tətbiq etməyə imkan verir. Bu, veb-səhifənin görünüşünü və davranışını fərqli cihazlara uyğunlaşdırmağa imkan yaradır.

Media-sorğulara dəyişənlərin tətbiqi

CSS-dəyişənlər media-sorğuların daxilində üslub dəyərlərini şərtlərə görə dəyişdirmək üçün istifadə oluna bilər. Bu, daha çevik və saxlamağı asan olan adaptiv dizaynlar yaratmağa imkan verir.

Media-sorğulara dəyişənlərin tətbiqinə misal:

CSS 
    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
        --font-size: 16px;
      }

      body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: var(--font-size);
      }

      a {
        color: var(--primary-color);
      }

      @media (max-width: 600px) {
        :root {
          --main-bg-color: #e0e0e0;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --main-bg-color: #d0d0d0;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --main-bg-color: #f0f0f0;
          --font-size: 16px;
        }
      }
HTML 
    
      <body>
        <p>Bu, <a href="#">Example.com</a> linkinə malik bir paraqrafdır.</p>
      </body>

İzah:

Bu nümunədə dəyişənlərin dəyərləri ekranın genişliyinə görə dəyişir:

  • 600px-dək genişlikdə ekranlar üçün fon daha tünd ton alır, şrift ölçüsü isə kiçilir.
  • 601px-dən 1200px-dək genişlikdə ekranlar üçün fon orta ton alır, şrift ölçüsü bir qədər artır.
  • 1200px-dən böyük genişlikdə ekranlar üçün ilkin dəyişən dəyərləri tətbiq olunur.

4.2 Mediya-sorğularda dəyişənlərin nümunələri

Nümunə 1: Adaptiv marjlar və font ölçüləri

CSS 
    
      :root {
        --padding: 20px;
        --font-size: 16px;
      }

      .container {
        padding: var(--padding);
        font-size: var(--font-size);
      }

      @media (max-width: 600px) {
        :root {
          --padding: 10px;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --padding: 15px;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --padding: 20px;
          --font-size: 16px;
        }
      }
HTML 
    
      <div class="container">
        <p>Bu adaptiv marjlar və font ölçüləri olan bir konteynerdir.</p>
      </div>

İzah:

  • Bu nümunədə .container konteyneri ekranın eni dəyişdikdə marjlarını və font ölçüsünü dəyişir

Nümunə 2: Dəyişənlər və mediya-sorğularla saytın teması

CSS 
    
      :root {
        --bg-color: #ffffff;
        --text-color: #000000;
        --link-color: #3498db;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
      }

      a {
        color: var(--link-color);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --bg-color: #000000;
          --text-color: #ffffff;
          --link-color: #9b59b6;
        }
      }
HTML 
    
      <body>
        <p>Bu mətn və keçid istifadəçinin rəng sxeminə uyğunlaşacaq. Ziyarət edin <a href="#">Example.com</a>.</p>
      </body>

İzah:

  • Bu nümunədə sayt istifadəçinin seçiminə uyğun olaraq rəng sxemini dəyişir (prefers-color-scheme: dark). Arxa fonun, mətnin və keçidlərin rəngləri işıq və qaranlıq tema arasında avtomatik dəyişir

4.3 Uyğunlaşan şəbəkə

Dəyişənlərdən və mediya-sorğularından istifadə edərək uyğunlaşan şəbəkə nümunəsi:

CSS 
    
      :root {
        --columns: 1fr;
        --gap: 10px;
      }

      .grid-container {
        display: grid;
        grid-template-columns: var(--columns);
        gap: var(--gap);
      }

      @media (min-width: 600px) {
        :root {
          --columns: 1fr 1fr;
        }
      }

      @media (min-width: 900px) {
        :root {
          --columns: 1fr 1fr 1fr;
        }
      }
HTML 
    
      <div class="grid-container">
        <div>Element 1</div>
        <div>Element 2</div>
        <div>Element 3</div>
        <div>Element 4</div>
      </div>

İzah:

  • Bu nümunədə ekranın eni ilə əlaqədar olaraq sütunların sayını dəyişən uyğunlaşan bir şəbəkədən istifadə olunur. Dar ekranlarda (600px-ə qədər) şəbəkədə bir sütun var, orta ekranlarda (600px-dən 900px-ə qədər) iki sütun, və geniş ekranlarda (900px-dən çox) üç sütun var.
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION