Breakpoints: Difference between revisions
From DiviFree
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
===3 Divi Breakpoints :=== | ===3 Divi Breakpoints :=== | ||
Responsive Design - Design version Desktop en premier | |||
# Desktop >= 981px | # Desktop >= 981px | ||
# Tablet 980px - 768px | # Tablet 980px - 768px | ||
| Line 35: | Line 35: | ||
} | } | ||
</pre> | </pre> | ||
==BreakPoints Bootstrap== | |||
===Mobile first=== | |||
C'est le style mobile qui a priorité | |||
* xs : Extra Small < 479px | |||
* md : Medium < 980 | |||
* lg : Large > 980 | |||
* xl : ≥1200px | |||
* xxl : ≥1400px | |||
==BreakPoints Devices== | ==BreakPoints Devices== | ||
Revision as of 20:31, 24 February 2023
BreakPoints Divi
3 Divi Breakpoints :
Responsive Design - Design version Desktop en premier
- Desktop >= 981px
- Tablet 980px - 768px
- 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 Bootstrap
Mobile first
C'est le style mobile qui a priorité
- xs : Extra Small < 479px
- md : Medium < 980
- lg : Large > 980
- 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
