Pages responsive, Viewport, Devices
Spectrum Adobe UI KIT
Отзывчивое масштабирование #
Breakpoint определяются как атрибуты минимальной ширины. Это означает, что размеры экрана между двумя определенными размерами точки останова будут наследовать все размеры точки останова меньшего размера.
Ширина Columns изменчива и равна 8,33% ширины сетки.
| Minimum Width |
Breakpoint |
Columns |
Gutters |
fluid Grid Width |
fixed Grid Width |
| До 304px |
XXS |
12 |
16px |
304px, Hscroll |
304px, Hscroll |
| 304px |
XS |
12 |
16px |
100% |
100% |
| 768px |
S |
12 |
24px |
100% |
100% |
| 1280px |
M |
12 |
32px |
100% |
1280px, center |
| 1768px |
L |
12 |
40px |
100% |
1280px, center |
| 2160px и выше |
XL |
12 |
48px |
100% |
1280px, center |
Устройства, viewport
Most Popular Screen Resolutions mediag | docs.adobe
Desktops & Laptops
Stationary devices monitors
| Device | Native Resolution (Pixels) | Viewport Size (Points) | Native Scale factor | Scale factor |
|---|
| Old & Special |
| 1024 * 768 и выше | - | - | - |
| HD |
| HD Ready | 1280 * 720 | - | - | - |
| HD | 1366 * 768 | - | - | - |
| HD Anamorphic | 1440 * 1080 | - | - | - |
| 1680 * 1050 | - | - | - |
| HD 1080 | 1920 * 1080 | - | - | - |
| 2K |
| 2048 * 1080 | - | - | - |
| 2048 * 1152 | - | - | - |
| Quad HD | 2560 * 1440 | - | - | - |
| 4K |
| 4096 * 2160 | - | - | - |
Modile device
Apple Products
| Device | Native Resolution (Pixels) | Viewport Size (Points) | Native Scale factor | Scale factor |
|---|
| iPhone |
| iPhone XR | 828 * 1792 | 414 * 896 | | |
| iPhone XS | 1125 * 2436 | 375 * 812 | | |
| iPhone XS Max | 1242 * 2688 | 414 * 896 | | |
| iPhone X | 1125 * 2436 | 375 * 812 | 3.0 | 3.0 |
| iPhone 7 Plus / 8 Plus | 1080 * 1920 | 414 * 736 | 2.608 | 3.0 |
| iPhone 7 / 8 | 750 * 1334 | 375 * 667 | 2.0 | 2.0 |
| iPhone 6S Plus / 6 Plus | 1080 * 1920 | 375 * 667 | 2.608 | 3.0 |
| iPhone 6 / 6S | 750 * 1334 | 375 * 667 | 2.0 | 2.0 |
| iPhone SE / 5 | 640 * 1136 | 320 * 568 | 2.0 | 2.0 |
| iPod |
| iPod Touch | 640 * 1136 | 320 * 568 | | |
| iPad |
| iPad Pro 12.9-inch (2nd generation) | 2048 * 2732 | 1024 * 1366 | 2.0 | 2.0 |
| iPad Pro 10.5-inch | 2224 * 1668 | 1112 * 834 | 2.0 | 2.0 |
| iPad Pro (12.9-inch) | 2048 * 2732 | 1024 * 1366 | 2.0 | 2.0 |
| iPad Pro (9.7-inch) | 1536 * 2048 | 768 * 1024 | 2.0 | 2.0 |
| iPad Third & Fourth Generation | 1536 * 2048 | 768 * 1024 | | |
| iPad Air 1 & 2 | 1536 * 2048 | 768 * 1024 | 2.0 | 2.0 |
| iPad Mini 4 | 1536 * 2048 | 768 * 1024 | 2.0 | 2.0 |
| iPad Mini 2 & 3 | 1536 * 2048 | 768 * 1024 | | |
| iPad Mini | 768 * 1024 | 768 * 1024 | | |
Android Devices
| Device | Native Resolution (Pixels) | Viewport Size (Points) | Native Scale factor | Scale factor |
|---|
| Phones |
| ~50% рынка РФ | 1440 * 2560 | | | |
| Nexus 6P | 1440 * 2560 | 412 * 732 | | |
| Nexus 5X | 1080 * 1920 | 412 * 732 | | |
| Google Pixel 3 XL | 1440 * 2960 | 412 * 847 | | |
| Google Pixel 3 | 1080 * 2160 | 412 * 824 | | |
| Google Pixel 2 XL | 1440 * 2560 | 412 * 732 | | |
| Google Pixel XL | 1440 * 2560 | 412 * 732 | | |
| Google Pixel | 1080 * 1920 | 412 * 732 | | |
| 58.3% рынка 2019 | 1080 * 2340 | - | - | - |
| Samsung Galaxy Note 9 | 1440 * 2960 | 360 * 740 | | |
| Samsung Galaxy Note 5 | 1440 * 2560 | 480 * 853 | | |
| LG G5 | 1440 * 2560 | 480 * 853 | | |
| One Plus 3 | 1080 * 1920 | 480 * 853 | | |
| Samsung Galaxy S9+ | 1440 * 2960 | 360 * 740 | | |
| Samsung Galaxy S9 | 1440 * 2960 | 360 * 740 | | |
| Samsung Galaxy S8+ | 1440 * 2960 | 360 * 740 | | |
| Samsung Galaxy S8 | 1440 * 2960 | 360 * 740 | | |
| Samsung Galaxy S7 Edge | 1440 * 2560 | 360 * 640 | | |
| Samsung Galaxy S7 | 1440 * 2560 | 360 * 640 | | |
| Tablets |
| Nexus 9 | 1536 * 2048 | 768 * 1024 | | |
| Nexus 7 (2013) | 1200 * 1920 | 600 * 960 | | |
| Samsung Galaxy Tab 10 | 800 * 1280 | 800 * 1280 | | |
| Chromebook Pixel | 2560 * 1700 | 1280 * 850 | | |
watchOS
| Device | Native Resolution (Pixels) | Viewport Size (Points) | Native Scale factor | Scale factor |
|---|
| watchOS, standard | | 320 * 357 | | 0.49 |
| watchOS, 38мм | | 272 * 340 | | 1 |
| watchOS, 44мм | | 368 * 448 | | 1 |
the wrist and the web for smaller screens
meta:<meta name="disabled-adaptations" content="watch">