Rujukan Titik Henti

Rujukan lengkap untuk breakpoint responsif.

Titik Henti Lalai

Prefiks	Min-Width	Sasaran Peranti
(tiada)	0px	Mudah alih (lalai)
mob:	480px	Mudah alih besar
tab:	768px	Tablet
lap:	1024px	Komputer riba
desk:	1280px	Desktop

Keserasian Tailwind

SenangStart menyokong titik henti (breakpoint) lalai Tailwind CSS menggunakan prefiks tw-.

Prefiks	Min-Width	Persamaan Tailwind
tw-sm:	640px	sm:
tw-md:	768px	md:
tw-lg:	1024px	lg:
tw-xl:	1280px	xl:
tw-2xl:	1536px	2xl:

Penggunaan dengan Skala Tailwind

<div 
  space="p:tw-4 tw-md:p:tw-8" 
  visual="rounded:tw-lg tw-lg:shadow:tw-xl"
>
  Penskalaan serasi Tailwind
</div>

Media Query CSS

/* Mobile first - tiada prefiks diperlukan */

@media (min-width: 480px) { /* mob: */ }
@media (min-width: 768px) { /* tab: */ }
@media (min-width: 1024px) { /* lap: */ }
@media (min-width: 1280px) { /* desk: */ }

Penggunaan

Jarak Responsif

<div space="p:small tab:p:medium lap:p:big">
  Padding progresif
</div>

Layout Responsif

<div layout="flex col tab:row">
  Column pada mudah alih, row pada tablet+
</div>

<nav layout="hidden tab:flex">
  Tersembunyi pada mudah alih, kelihatan pada tablet+
</nav>

Tipografi Responsif

<h1 visual="text-size:big tab:text-size:giant lap:text-size:vast">
  Tajuk responsif
</h1>

Pendekatan Mobile-First

SenangStart menggunakan reka bentuk responsif mobile-first:

1. Gaya asas digunakan untuk semua saiz skrin
2. Prefiks breakpoint digunakan dari breakpoint itu KE ATAS

<!-- Ini bermaksud: -->
<!-- - Mudah alih: small padding -->
<!-- - Tablet dan ke atas: medium padding -->
<!-- - Laptop dan ke atas: big padding -->
<div space="p:small tab:p:medium lap:p:big">
  Kandungan
</div>

Penyesuaian

Tambah atau ubah breakpoint dalam senangstart.config.js:

export default {
  theme: {
    screens: {
      'mob': '480px',
      'tab': '768px',
      'lap': '1024px',
      'desk': '1280px',
      'wide': '1536px',    // Tambah lebih lebar
      'ultra': '1920px'    // Tambah ultra-wide
    }
  }
}

Guna breakpoint tersuai:

<div space="desk:p:big wide:p:giant ultra:p:vast">
  Padding skrin besar
</div>

Corak Biasa

Tunjuk/Sembunyi Elemen

<!-- Mudah alih sahaja -->
<div layout="block tab:hidden">Menu mudah alih</div>

<!-- Desktop sahaja -->
<div layout="hidden lap:block">Sidebar desktop</div>

Grid Responsif

<div 
  layout="grid"
  space="g:small tab:g:medium"
  style="grid-template-columns: 1fr; 
         @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }"
>
  Kad...
</div>

Kontena Responsif

<div space="p:small tab:p:medium lap:p:big max-w:[1200px] m-x:auto">
  Kontena di tengah dengan padding responsif
</div>