Зміст
Ніхто ніколи не говорив, що адаптивний веб-дизайн був простим, але ви можете зробити багато, щоб згладити процес. Якщо ви можете взяти участь у адаптивному проекті, не турбуючись про розмір ваших сіток, це врятує вам принаймні один головний біль на шляху.
Ось швидка розбивка стандартних вимірювань, які можна використовувати на різних пристроях, залежно від ширини, яку ви вибрали для виготовлення стовпців. Пам’ятайте, що ширина стовпців повинна залишатися незмінною для різних розмірів пристрою, але ви можете налаштувати початкову ширину відповідно до своїх потреб. Я зазвичай розробляю мобільний веб-сайт із шириною 360 пікселів для роботи в цій системі.
Колони шириною 120 пікселів
Телебачення
1024 x 576 (співвідношення сторін 1080p): 8 стовпців, поле 32px
Робочий стіл
1440 x 840: 12 стовпців, поле 0px
1280 x 800: 10 стовпців, поле 40px ліворуч та праворуч
Планшет
1024 x 768: 8 стовпців, поле 32px ліворуч та праворуч
960 x -: 8 стовпців, поле 0px
Мобільний
320 x -: 3 стовпці, поле 0px
Стовпці шириною 100 пікселів
Телебачення
1024 x 576 (співвідношення 1080p): 10 стовпців, поле 12px ліворуч та праворуч
Робочий стіл
1440 x 840: 14 стовпців, поле 20px ліворуч та праворуч
1280 x 800: 12 стовпців, поле 40px ліворуч та праворуч
Планшет
1024 x 768: 10 стовпців, поле 12px ліворуч та праворуч
960 x -: 9 стовпців, поле 30px ліворуч та праворуч
Мобільний
320 x -: 3 стовпці, поле 10px ліворуч та праворуч
Стовпці шириною 80 пікселів
Телебачення
1024 x 576 (співвідношення 1080p): 12 стовпців, поле 32px ліворуч та праворуч
Робочий стіл
1440 x 840: 18 стовпців, поле 0px
1280 x 800: 16 стовпців, поле 0px
Планшет
1024 x 768: 12 стовпців, поле 32px ліворуч та праворуч
960 x -: 12 стовпців, поле 0px
Мобільний
320 x -: 4 стовпці, поле 0px
Ця стаття спочатку з'явилася в мережевий журнал випуск 281; придбайте його тут!
