DF-CSS Breakpoints

Available breakpoints

• xs : < 576px (Extra Small) - Téléphone vertical - Default
• sm : >= 576px (Small) - Téléphone
• md : >= 767px (Medium) - Tablette verticale - Téléphone horizontal
• lg : >= 981 (Large) - Tablette et Desktop / Petits écrans
• xl : >= 1280px (Extra Large) - Desktop / Écran moyen
• xxl : >= 1536px (Extra Extra Large) - Desktop / Écran large

CSS Media Query (Mobile First)

// X-Small devices (portrait phones, less than 576px)
// No media query for 'xs' since this is the default

// SM - Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// MD - Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// LG Large devices (desktops, 981px and up)
@media (min-width: 981px) { ... }

// XL - X-Large devices (large desktops, 1280px and up)
@media (min-width: 1280px) { ... }

// XXL - XX-Large devices (larger desktops, 1538px and up)
@media (min-width: 1538px) { ... }