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 CSS

  /*** Responsive Styles Large Desktop And Above ***/
  @media all and (min-width: 1405px) {
    ...
  }
  /*** Responsive Styles Standard Desktop Only ***/
  @media all and (min-width: 1100px) and (max-width: 1405px) {
    ...
  }
  /*** Responsive Styles Tablet And Below ***/
  @media all and (max-width: 980px) {
    ...
  }
  /*** Responsive Styles Tablet Only ***/
  @media all and (min-width: 768px) and (max-width: 980px) {
    ...
  }
  /*** Responsive Styles Smartphone Only ***/
  @media all and (max-width: 767px) {
    ...
  }
  /*** Responsive Styles Smartphone Portrait ***/
  @media all and (max-width: 479px) {
    ...
  }

BreakPoints DiviFree

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

• sm (Divi): < 767px (Small) - Téléphone vertical
• md (Divi): ≤ 980 (Medium) - Tablette verticale - Téléphone horizontal
• lg (Divi): > 980 (Large) - Desktop
  • lg : < 1200 (Large) - Desktop L
  • xl : < 1400px (X-Large) - Desktop XL
  • xxl : ≥ 1400px (XX-Large) - Desktop XXL

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

BreakPoints Devices

• iPad : 1180 x 820
• Pad mini : 1024 x 768
• iPhone XR : 414 x 896
• iPhone SE : 375 x 667
• iPhone 12 : Pro 390x844

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

• Classique : 1024
• Classique : 1280