Breakpoints

BreakPoints Divi

Divi Breakpoints (3 modes) :

Responsive Design - Design version Desktop en premier

1. Desktop >= 981px
2. Tablet 980px - 768px
3. Mobile <= 767px

BreakPoints DiviFree

DEF - XS / SM / MD / LG / XL / XXL

Utilisation des breakpoints de divi ( 576 / 980 ) Responsive Design - Design version Desktop en premier

BreakPoints de Divi :

• Desktop : par défault - Équivalent à lg et supérieur
• Tablette : < 980px - Équivalent sm + md
• Mobile : < 576px - Équivalent à xs

Tous les BreakPoints :

• default : > 980px - Desktop
• xxl : ≥ 1537px (XX Large) - Desktop / Écran large
• xl : 1281px - 1536px (X Large) - Desktop / Écran moyen
• lg : 981px - 1280px (Large) - Tablette et Desktop / Petits écrans
• md : 768px - 980px (Medium) - Tablette verticale - Téléphone horizontal
• sm : 576px - 767px (Small) - Téléphone
• xs : < 576px (X Small) - Téléphone vertical

Containers

• lg : 1280px
• xl : 1500px

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) { ... }

CSS Media Query

/*** DT DEFAULT ***/
@media all and (min-width: 981px) {
}

@media all and (max-width: 980px) {
}

/*** XXL Desktop large ***/
@media all and (min-width: 1537px) {
}

/*** XL Desktop large ***/
@media all and (min-width: 1536px) {
}

/*** LG Desktop large ***/
@media all and (min-width: 1280px) {
}

/*** MD - Tablet Only ***/
@media all and (min-width: 980px) {
}

/*** MD Smartphone Only ***/
@media all and (min-width: 767px) {
}

BreakPoints Bootstrap

Mobile first

C'est le style mobile qui a priorité

• xs : Extra Small <576px
• sm : Small ≥576px
• md : Medium ≥768px
• lg : Large ≥992px
• xl : ≥1200px
• xxl : ≥1400px

Media Query Bootstrap 5.0

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

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

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

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

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

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

BreakPoints Tailwind

Mobile first

https://tailwindcss.com/docs/container

• sm (640px) max-width: 640px;
• md (768px) max-width: 768px;
• lg (1024px) max-width: 1024px;
• xl (1280px) max-width: 1280px;
• 2xl (1536px) max-width: 1536px;

BreakPoints Devices

Stats: https://gs.statcounter.com/screen-resolution-stats

Viewport Desktop (Stats 2022)

• 1920 x 1080 (24%) : Écrans d'ordinateur de grande taille.
• 1366 x 768 (16%) : Écrans d'ordinateur de taille moyenne.
• 1536 x 864 (11%) : Écrans d'ordinateur de taille moyenne.
• 1280 x 720 (6%): Ordinateurs portable s de petite taille et les écrans d'ordinateur de taille moyenne.
• 1440 x 900 (6%)
• 1600 x 900 (3%)

Viewport Tablettes (stats 2022)

• 768 x 1024 (29%)
• 810 x 1080 (8%)
• 1280 x 800 (7%)
• 800 x 1280 (6%)
• 601 x 962 (5%)
• 820 x 1180 (3%)

Viewport Mobile (stats 2022)

• 360 x 800 (11%)
• 390 x 844 (7%
• 414 x 896 (6%)
• 412 x 915 (6%)
• 393 x 873 (5%)

Viewport Devices

• iPad Pro : 1024 x 1366
• Pad mini : 768 x 1024
• iPhone XR : 414 x 896
• iPhone SE : 375 x 667

• Surface : 912 x 1368
• Surface Duo : 540 x 720