Статьи

Двигаться до 1140 пикселей? Вот Жидкая Сетка, чтобы Помочь

За последние несколько лет многие дизайнеры проектировали для ширины экрана 1024 пикселя. Разрешение 800px давно замерзло, но настало ли время приступить к проектированию экрана с более высоким разрешением? Со многими пользователями мониторов и ноутбуков с экранами шириной 1280 пикселей и более широкими, как вы собираетесь разрабатывать для такого размера?

Ресурс, который вам может пригодиться, это сетка размером 1140 пикселей, созданная австралийским дизайнером Энди Тейлором . Сетка 1140 идеально вписывается в монитор 1280. На меньших мониторах это становится жидким и приспосабливается к ширине браузера. Сетка состоит из двенадцати столбцов, которые можно равномерно разделить на столбцы по два, три, четыре или шесть. Что касается поддержки браузеров, сетка Энди работает в Chrome, Safari, Firefox, IE7 и IE8. IE6 (всегда есть, не так ли?) Не поддерживает максимальную ширину, поэтому сетка не фиксируется до 1140 пикселей. Он охватывает всю ширину браузера.

1140Grid

Желоба и изображения

Желоба различаются по размеру, потому что сетка основана на процентах. При полной ширине желоба имеют ширину 40 пикселей. При использовании изображений, если изображение меньше столбца, в котором оно содержится, оно будет отображаться в своем первоначальном размере. Если он больше, он будет уменьшен до ширины столбца. По этой причине ширина и высота изображений не должны быть определены.

Сетка для мобильных
Сетка не предназначена для поддержки старых WAP-телефонов, но была протестирована и поддерживает iPhone 3 и 4, iPad, некоторые телефоны Android и Blackberry. Он работает для устройств, которые распознают «handheld» в медиа-таблицах стилей и / или медиа-запросах. С помощью медиа-запросов вы можете даже включить x2 изображения для iPhone 4 Retina Display.

Вы можете скачать сетку бесплатно здесь . Загрузка включает файл index.html и шесть таблиц стилей. Он распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 Australia . Вы также можете загрузить шаблон сетки Photoshop размером 1140 пикселей здесь , который основан на том, как он отображается в веб-наборе, так что на самом деле он составляет 1133 пикселя, поскольку все браузеры округляют подпиксели немного по-разному.

Для какого разрешения вы разрабатываете? Это слишком рано, чтобы перейти к макету 1280 пикселей?