Foundation - Kueri Media

Kueri media adalah modul CSS3 yang menyertakan fitur media seperti lebar, tinggi, warna, dan menampilkan konten sesuai resolusi layar yang ditentukan.

Foundation menggunakan kueri media berikut ini untuk membuat rentang rincian -

Small - Digunakan untuk layar apa pun.
Medium - Digunakan untuk layar 640 piksel dan lebih lebar.
Large - Digunakan untuk layar 1024 piksel dan lebih lebar.

Anda dapat mengubah ukuran layar dengan menggunakan kelas breakpoint . Misalnya, Anda dapat menggunakan kelas .small-6 untuk layar berukuran kecil dan kelas .medium-4 untuk layar berukuran sedang seperti yang ditunjukkan pada cuplikan kode berikut -

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

Mengubah Breakpoints

Anda dapat mengubah breakpoint, jika aplikasi Anda menggunakan versi SASS Foundation. Anda dapat menempatkan nama breakpoints di bawah variabel $ breakpoints di file pengaturan seperti yang ditunjukkan di bawah ini -

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

Anda dapat mengubah kelas breakpoints di file pengaturan dengan memodifikasi variabel $ breakpoint-class . Jika Anda ingin menggunakan kelas .large di CSS, tambahkan ke akhir daftar seperti yang ditunjukkan di bawah ini -

$breakpoints-classes: (small medium large);

Misalkan, Anda ingin menggunakan kelas .xlarge di CSS, dan kemudian menambahkan kelas ini ke akhir daftar seperti yang ditunjukkan di bawah ini -

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

KELANCANGAN

The Breakpoint Mixin

Anda bisa menulis kueri media dengan menggunakan breakpoint () mixin bersama dengan @include .
Gunakan kata kunci turun atau hanya bersama dengan nilai breakpoint untuk mengubah perilaku kueri media seperti yang ditunjukkan dalam format kode berikut -

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

Anda dapat menggunakan tiga kueri media potret , lanskap , dan retina untuk orientasi perangkat atau kerapatan piksel dan bukan kueri media berbasis lebar.

Fungsi Breakpoint

Anda bisa menggunakan fungsionalitas mixin breakpoint () dengan menggunakan fungsi internal.
The breakpoint () fungsi dapat digunakan langsung untuk menulis pertanyaan media yang sendiri -

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

JavaScript

Bekerja dengan Kueri Media

Foundation JavaScript menyediakan fungsi MediaQuery.current untuk mengakses nama breakpoint saat ini pada objek Foundation.MediaQuery seperti yang ditentukan di bawah ini -

Foundation.MediaQuery.current

Fungsi MediaQuery.current menampilkan kecil , sedang , besar sebagai nama breakpoint saat ini.
Anda bisa mendapatkan media query dari breakpoint menggunakan fungsi MediaQuery.get seperti yang ditunjukkan di bawah ini -

Foundation.MediaQuery.get('small')

Referensi Sass

Variabel

Tabel berikut mencantumkan variabel SASS, yang dapat digunakan untuk menyesuaikan gaya default komponen -

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$breakpoints Ini adalah nama breakpoint yang bisa digunakan untuk menulis kueri media dengan menggunakan mixin breakpoint () .	Peta	kecil: 0px medium: 640px besar: 1024 piksel xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Anda dapat mengubah output kelas CSS dengan mengubah variabel $ breakpoint-class .	Daftar	kecil sedang besar

Mixins

Mixins membuat sekelompok gaya untuk membangun struktur kelas CSS Anda untuk komponen Foundation.

BREAKPOINT

Ini menggunakan breakpoint () mixin untuk membuat kueri media dan menyertakan aktivitas berikut -

Jika string dilewatkan, mixin mencari string di peta $ breakpoints dan membuat kueri media.
Jika Anda menggunakan nilai piksel, maka konversikan ke nilai em menggunakan $ rem-base .
Jika nilai rem dilewatkan, maka unitnya berubah menjadi em.
Jika Anda menggunakan nilai em, maka itu dapat digunakan apa adanya.

Tabel berikut menentukan parameter yang digunakan oleh breakpoint -