Medya Sorguları(Media Queries) ve Konteyner Sorguları(Container Queries)

Doğuhan ELMA tarafından Nedir? yayınlanma tarihi Nisan 24

30 görünüm

İkisi de web tasarımında duyarlı ve esnek düzenler oluşturmak için kullanılır, ancak farklı yaklaşımlar sunarlar.

Media Queries

Media Queries, CSS'nin bir parçasıdır ve belirli bir medya türüne (örneğin ekran) ve/veya cihazın özelliklerine (örneğin ekran genişliği, çözünürlük) bağlı olarak farklı stiller uygulamak için kullanılır. Bu, farklı ekran boyutları ve çözünürlükler için tasarımın nasıl uyum sağlayacağını belirlemenize olanak tanır. Örneğin, bir web sitesinin mobil, tablet ve masaüstü sürümleri için farklı düzenler tanımlamak mümkündür.

Basit bir media query örneği:

@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Bu örnekte, ekran genişliği 768 piksel veya daha büyük olduğunda arka plan rengi açık mavi olarak ayarlanır.

Breakpoints, duyarlı web tasarımında çok önemli bir kavramdır. Bu terim, belirli ekran genişliklerinde veya diğer koşullarda CSS stillerinde değişiklik yapmak için kullanılan noktaları ifade eder. Breakpoints, genellikle medya sorguları (media queries) ile birlikte kullanılarak, çeşitli ekran boyutları ve yönlerine uyum sağlamak için web sayfasının düzenini değiştirmek için kullanılır.

Breakpoints'in Kullanımı

Breakpoints, web sitesinin farklı cihazlar (masaüstü, tablet, akıllı telefon) veya farklı ekran boyutlarına (geniş ekran, standart ekran) göre nasıl davranacağını belirler. Genellikle, tasarımcılar ve geliştiriciler bu breakpoints'leri, tipik cihaz ekran boyutlarını temel alarak seçerler, ama aynı zamanda içerik ve tasarımın ihtiyaçlarına göre de özelleştirilebilirler.

Popüler Breakpoint Boyutları

İşte bazı yaygın kullanılan breakpoint örnekleri:

320px — Çok küçük cihazlar (eski akıllı telefonlar).

480px — Küçük cihazlar (akıllı telefonlar).

768px — Tabletler.

992px veya 1024px — Küçük masaüstü ve büyük tabletler.

1200px veya daha fazla — Büyük masaüstü monitörler.

Örnek Media Query Kullanımı

Breakpoints, CSS içinde medya sorguları kullanılarak uygulanır. İşte bir örnek:

/* Temel stiller */
body {
  background-color: lightgrey;
}

/* 768px'den büyük ekranlar için */
@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* 1024px'den büyük ekranlar için */
@media (min-width: 1024px) {
  body {
    background-color: navy;
  }
}

link tags:

İşaretlemenin <head> bölümünde bulabileceğiniz bir bağlantıda medya sorgusu şöyle görünür:

<link
    rel="stylesheet"
    media="screen and (orientation: portrait)"
    href="portrait-screen.css"
/>

Bu medya sorgusu "Bir ekran mısınız ve yönünüz dikey mi?" diye soruyor.

CSS dosyasında:

@media screen and (orientation: portrait) {
    /* styles here */
}

Medya sorgusunun başına not ekleyerek herhangi bir medya sorgusu ifadesinin mantığını tersine çevirmek mümkündür. Örneğin, aşağıdaki kod önceki örneğimizdeki sonucu tersine çevirir ve dikey yönelimli bir ekran olmayan her şey için dosyayı yükler:

<link
    rel="stylesheet"
    media="not screen and (orientation: portrait)"
    href="portrait-screen.css"
/>

Medya sorgularını birleştirme:

<link
    rel="stylesheet"
    media="screen and (orientation: portrait) and (min-width: 800px)"
    href="800wide-portrait-screen.css"
/>

Bir dizi farklı medya sorgusu:

<link
    rel="stylesheet"
    media="screen and (orientation: portrait) and (min-width: 800px),
    projection"
    href="800wide-portrait-screen.css"
/>

Burada dikkat edilmesi gereken iki nokta vardır. Birincisi, virgül her bir medya sorgusunu ayırır ve etkin bir şekilde or komutu gibi davranır. İkinci olarak, projeksiyondan sonra parantez içinde ve veya özellik/değer kombinasyonunun bulunmadığını fark edeceksiniz. Bunun nedeni, bu değerlerin olmaması durumunda medya sorgusunun tüm medya türlerine uygulanmasıdır. Örneğimizde, stiller tüm projektörlere uygulanacaktır.

Container Queries

Container Queries, bir elementin içinde bulunduğu konteynerin boyutlarına dayanarak stiller uygulamanıza izin veren daha yeni bir özelliktir. Bu, büyük bir ekran üzerinde bile, bir elementin içerisinde yer aldığı konteynerin boyutuna göre duyarlı olmasını sağlar. Özellikle, web bileşenleri ve yeniden kullanılabilir UI parçaları için oldukça yararlıdır.

Basit bir container query örneği:

@container (min-width: 500px) {
  .card {
    padding: 2rem;
  }
}

Bu örnekte, .card sınıfına sahip bir element, içinde bulunduğu konteyner 500 piksel veya daha geniş olduğunda 2 rem dolgu alır.

@media (min-width: 40em) {
    .component {
        /* styles */
    }
    .sidebar .component {
        /* styles */
    }
}

Konteyner bağıl uzunlukları:

cqi, 1% of the inline-size

cqw, 1% of the width

cqb, 1% of the block-size

cqh, 1% of the height

cqmin, 1% of the smallest of cqi and cqb

cqmax, 1% of the largest of cqi and cqb

.heading {
    font-size: calc(14px + 2cqi);
}

@container (orientation: portrait) {
    /* styles */
}

Media Queries: Genel sayfa düzenini cihaz özelliklerine göre ayarlamak için idealdir. Örneğin, farklı cihazlarda web sitesinin nasıl görüneceğini kontrol etmek.

Container Queries: Belirli bileşenlerin veya UI elementlerinin, bulundukları konteynera göre duyarlı olmalarını sağlar. Böylece, aynı bileşen farklı yerlerde farklı stillere sahip olabilir.

0 Yorum

Önerilen Yorumlar

Görüntülenecek yorum yok.

Yorum ekle...

× Zengin metin olarak yapıştırıldı. Bunun yerine düz metin olarak yapıştır

Yalnızca 75 emojiye izin verilir.

× Bağlantınız otomatik olarak gömüldü. Bunun yerine bağlantı olarak görüntüle

× Önceki içeriğiniz geri yüklendi. Düzenleyiciyi temizle

× Görüntüleri doğrudan yapıştıramazsınız. URL'den resim yükleyin veya ekleyin.

URL'den resim ekle

Giriş Yap

HTML

Medya Sorguları(Media Queries) ve Konteyner Sorguları(Container Queries)

0 Yorum

Önerilen Yorumlar

Anasayfa

Aktivite