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 -

Sr.No. Nama & Deskripsi Tipe Nilai Default
1

$value

Ini memproses nilai dengan menggunakan nilai breakpoint name, px, rem atau em.

kata kunci atau angka Tidak ada

Fungsi

BREAKPOINT

Ini menggunakan breakpoint () mixin untuk membuat kueri media dengan nilai masukan yang cocok.

Tabel berikut menetapkan nilai input yang mungkin digunakan oleh breakpoint -

Sr.No. Nama & Deskripsi Tipe Nilai Default
1

$val

Ini memproses nilai dengan menggunakan nilai breakpoint name, px, rem atau em.

kata kunci atau angka kecil

Referensi JavaScript

Fungsi

Ada dua jenis fungsi -

  • .atLeast- Ini memeriksa layar. Harus lebar setidaknya sebagai breakpoint.

  • .get - Ini digunakan untuk mendapatkan kueri media dari breakpoint.

Tabel berikut menentukan parameter yang digunakan oleh fungsi di atas -

Sr.No. Nama & Deskripsi Tipe
1

size

Ia memeriksa dan mendapatkan nama breakpoint untuk masing-masing fungsi yang ditentukan.

Tali