Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Panduan Ringkas Kepada Break Point Menegak

by
Difficulty:IntermediateLength:QuickLanguages:

Malay (Melayu) translation by Zaenal Abidin (you can also view the original English article)

Selamat datang ke tutorial screencast Envato Tuts+ yang lain! Dalam video ini, saya akan memberi anda pengenalan ringkas cara menggunakan CSS breakpoints menegak (CSS vertical breakpoints).

Breakpoints adalah sinonim dengan reka bentuk web responsif; mereka adalah titik-titik di mana anda memilih untuk mengubah layout sebuah reka bentuk. Sebagai contoh, 768px adalah lebar viewport yang biasa digunakan, di bawahnya anda mungkin ingin menyusun semula layout anda untuk peranti mobile, dan di atasnya anda mungkin berfikir lebih banyak dari segi desktop.

Walau bagaimanapun, breakpoint tidak hanya berlaku secara mendatar, pada lebar viewport; mereka mungkin akan berkuatkuasa untuk beberapa sebab yang berbeza. Dalam tutorial ini, kita akan berbincang soalan breakpoint menegak, yang digunakan berhubung dengan ketinggian viewport. Kami menggunakannya dengan property min-height dan max-height dalam media query CSS. Mari kita lihat lebih mendalam.

Dalam video ini kita melihat senario berikut:

  • Mengubah jarak dan saiz fon pada viewport yang singkat.
  • Melaraskan saiz navigasi mobile pada viewport yang singkat.
  • Membuat header atau footer tetap, hanya apabila terdapat ruang yang cukup.
  • Melaraskan bahagian full-screen untuk viewport yang yang singkat.

Pastikan memuat turun fail sumber untuk diikuti.

Bacaan Lanjut

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.