Foundation - Medya Sorguları

Ortam sorguları, genişlik, yükseklik, renk gibi ortam özelliklerini içeren ve içeriği belirtilen ekran çözünürlüğüne göre görüntüleyen CSS3 modülüdür.

Foundation, arıza aralıkları oluşturmak için aşağıdaki medya sorgularını kullanır -

Small - Herhangi bir ekran için kullanılır.
Medium - 640 piksel ve daha geniş ekranlar için kullanılır.
Large - 1024 piksel ve daha geniş ekranlar için kullanılır.

Kesme noktası sınıflarını kullanarak ekran boyutunu değiştirebilirsiniz . Örneğin , aşağıdaki kod parçacığında gösterildiği gibi , küçük boyutlu ekranlar için .small-6 sınıfını ve orta boyutlu ekranlar için .medium-4 sınıfını kullanabilirsiniz -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Kesme Noktalarını Değiştirme

Uygulamanız Foundation'ın SASS sürümünü kullanıyorsa, kesme noktalarını değiştirebilirsiniz. Kesme noktası adını, aşağıda gösterildiği gibi ayarlar dosyasındaki $ kesme noktaları değişkeninin altına yerleştirebilirsiniz -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

$ Breakpoint-classes değişkenini değiştirerek ayarlar dosyasındaki kesme noktası sınıflarını değiştirebilirsiniz . CSS'de .large sınıfını kullanmak istiyorsanız, aşağıda gösterildiği gibi listenin sonuna ekleyin -

$breakpoints-classes: (small medium large);

Diyelim ki, CSS'de .xlarge sınıfını kullanmak ve ardından bu sınıfı aşağıda gösterildiği gibi listenin sonuna eklemek istiyorsunuz -

$breakpoints-classes: (small medium large xlarge);

SASS

Kesme Noktası Karması

@İnclude ile birlikte breakpoint () mixin kullanarak medya sorgularını yazabilirsiniz .
Aşağıdaki kod biçiminde gösterildiği gibi medya sorgusunun davranışını değiştirmek için kesme noktası değeriyle birlikte down veya only anahtar sözcüklerini kullanın -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

Cihaz yönü veya piksel yoğunluğu için dikey , yatay ve retina olmak üzere üç medya sorgusu kullanabilirsiniz ve bunlar genişliğe dayalı medya sorguları değildir.

Kesme Noktası İşlevi

Sen işlevselliğini kullanabilirsiniz kesme noktası () iç işlevini kullanarak mixin.
Kesme noktası () işlevi kendi medya sorguları yazmak için doğrudan kullanılabilir -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Medya Sorgularıyla Çalışma

Foundation JavaScript, aşağıda belirtildiği gibi Foundation.MediaQuery nesnesindeki geçerli kesme noktası adına erişmek için MediaQuery.current işlevini sağlar -

Foundation.MediaQuery.current

MediaQuery.current fonksiyonu görüntüler küçük , orta , büyük akım kesme noktası adları gibi.
Aşağıda gösterildiği gibi MediaQuery.get işlevini kullanarak kesme noktası ortam sorgusunu alabilirsiniz -

Foundation.MediaQuery.get('small')

Sass Referansı

Değişkenler

Aşağıdaki tablo, bileşenin varsayılan stillerini özelleştirmek için kullanılabilecek SASS değişkenlerini listeler -

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$breakpoints Breakpoint () mixin kullanarak ortam sorgularını yazmak için kullanılabilen bir kesme noktası adıdır .	Harita	küçük: 0px orta: 640 piksel büyük: 1024 piksel xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes $ Breakpoint-classes değişkenini değiştirerek CSS sınıfı çıktısını değiştirebilirsiniz .	Liste	küçük Orta Büyük

Mixins

Mixins, Foundation bileşenleri için CSS sınıf yapınızı oluşturmak üzere bir stil grubu oluşturur.

BREAKPOINT

Medya sorguları oluşturmak için breakpoint () mixin kullanır ve aşağıdaki etkinlikleri içerir -

Dizge aktarılırsa, mixin dizeyi $ kesme noktaları eşleminde arar ve medya sorgusunu oluşturur.
Piksel değeri kullanıyorsanız, $ rem-base kullanarak bunu em değerine dönüştürün .
Rem değeri geçilirse birimini em olarak değiştirir.
Em değerini kullanıyorsanız, olduğu gibi kullanılabilir.

Aşağıdaki tablo, kesme noktası tarafından kullanılan parametreyi belirtir -

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$value Değerleri kesme noktası adı, px, rem veya em değerlerini kullanarak işler.	anahtar kelime veya numara	Yok

Fonksiyonlar

BREAKPOINT

Eşleşen giriş değerine sahip medya sorguları oluşturmak için breakpoint () mixin kullanır .

Aşağıdaki tablo, kesme noktası tarafından kullanılan olası giriş değerini belirtir -

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$val Değerleri kesme noktası adı, px, rem veya em değerlerini kullanarak işler.	anahtar kelime veya numara	küçük

JavaScript Referansı

Fonksiyonlar

İki tür işlev vardır -

.atLeast- Ekranı kontrol eder. En azından bir kesme noktası olarak geniş olmalıdır.
.get - Kesme noktasının medya sorgusunu almak için kullanılır.

Aşağıdaki tablo, yukarıdaki işlevler tarafından kullanılan parametreyi belirtir -

Sr.No.	İsim & Açıklama	Tür
1	size Sırasıyla belirtilen işlevler için kesme noktasının adını kontrol eder ve alır.	Dize