Breakpoints: Difference between revisions
From DiviFree
No edit summary |
|||
| Line 68: | Line 68: | ||
Stats: https://gs.statcounter.com/screen-resolution-stats | Stats: https://gs.statcounter.com/screen-resolution-stats | ||
Viewport Desktop (Stats 2022) | ===Viewport Desktop (Stats 2022)=== | ||
* 1920 x 1080 (24%) : Écrans d'ordinateur de grande taille. | * 1920 x 1080 (24%) : Écrans d'ordinateur de grande taille. | ||
* 1366 x 768 (16%) : Écrans d'ordinateur de taille moyenne. | * 1366 x 768 (16%) : Écrans d'ordinateur de taille moyenne. | ||
| Line 76: | Line 76: | ||
* 1600 x 900 (3%) | * 1600 x 900 (3%) | ||
Viewport Tablettes (stats 2022) | ===Viewport Tablettes (stats 2022)=== | ||
* 768 x 1024 (29%) | * 768 x 1024 (29%) | ||
* 810 x 1080 (8%) | * 810 x 1080 (8%) | ||
| Line 84: | Line 84: | ||
* 820 x 1180 (3%) | * 820 x 1180 (3%) | ||
Viewport Mobile (stats 2022) | ===Viewport Mobile (stats 2022)=== | ||
* 360 x 800 (11%) | * 360 x 800 (11%) | ||
* 390 x 844 (7% | * 390 x 844 (7% | ||
| Line 91: | Line 91: | ||
* 393 x 873 (5%) | * 393 x 873 (5%) | ||
===Viewport Devices=== | |||
* iPad Pro : 1024 x 1366 | * iPad Pro : 1024 x 1366 | ||
* Pad mini : 768 x 1024 | * Pad mini : 768 x 1024 | ||
Revision as of 02:09, 26 February 2023
BreakPoints Divi
Divi Breakpoints (3 modes) :
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 DiviFree
Utilisation des breakpoints de divi ( 576 / 980 ) Responsive Design - Design version Desktop en premier
- xs < 576px (x Small) - Téléphone vertical
- sm (Divi): 576px - 767px (Small) - Téléphone
- md (Divi): 767px - 980px (Medium) - Tablette verticale - Téléphone horizontal
- default (Divi): > 980px (Large) - Desktop
- lg : 980px - 1100px (Large) - Desktop L
- xl : 1100px - 1405px (X-Large) - Desktop XL
- xxl : ≥ 1405px (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 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
