Открыть меню    

Резиновые макеты: примеры, статьи и фреймворки

С тем, чтобы сайт подстраивался под различные разрешения экрана, используют резиновые макеты. Однако, при создании таких макетов, особенно у начинающих верстальщиков, могут возникнуть определенные затруднения.

Вероятно, помочь решить эти затруднение сможет подборка из статей, сайтов и фреймворков, собранных в данной статье. Вы сможете почерпнуть свежие идеи или на примерах найти новые решения при создании резиновых макетов.

CSS-фреймворки

Правильный css-фреймворк поможет создать даже очень сложный макет. Ниже приведена неплохая подборка css-фремворков.

Fluid 960 Grid System | сетка из шестнадцати колонок

fluid960gs

FluidGrids

fluidgrids

Tiny Fluid Grid

Очень простой и легкий фреймворк, обратите внимание.

Tiny Fluid Grid

Прекрасный трехколоночный резиновый макет: Нет CSS хаков. Дрежелюбен к SEO. iPhone совместимость.

perfect-3-column.htm

layouts.ironmyers.com CSS макеты: коллекция из 224 сеток и CSS макетов

layouts.ironmyers.com

Шаблоны

Эти шаблоны и макеты должны обеспечить вам быстрый старт.

Dynamic Drive CSS Layouts - резиновые макеты

dynamicdrive

FreeLayoutsWorld Бесплатные резиновые макеты

FreeLayoutsWorld

MaxDesign CSS макеты

MaxDesign

Живые примеры

Используйте данные сайты для вдохновения при конструировании уже вашего резинового сайта.

kayakcapers.co.uk

Очень любопытно, под различные разрешения экрана своя таблица стилей.

kayakcapers.co.uk

Clearleft

Обратите внимание на то, что максимальная ширина (max-width) контейнера задана в em.

clearleft.com

La Cantina Italian &
Новая Зеландия винный магазин

Используется техника с отрицательными полями.

lacantina.co.nz

jek2kdotcom

jek2kdotcom

Andrea Gandino

andreagandino.com

Freelenz

Плавающие блоки лежат в блоке, ширина которого не задана, в результате при изменении разрешения экрана происходит смещение блоков.

Freelenz

GNV & Partners

Объемность создается за счет фона.

gnvpartners.com

Stuff and Nonsense

Единица измерения для блоков – проценты (%), плюс используется свойство max-width.

stuffandnonsense.co.uk

Статьи

Разметка для резинового по ширине макета dnzl.ru

Резиновые макеты (разметка) для вашего сайта dnzl.ru



A List Apart Создание резинового макета на основе отрицательных полей

Для понимания: Отрицательное поле (margin) и верстка в три колонки dnzl.ru

stuffandnonsense.co.uk

CSS Layouts: The Fixed. The Fluid. The Elastic. – Beast-Blog.com

Beast-Blog.com

24 ways Сложный резиновый макет в три шага

24 ways

Резиновый макет - легкий путь | Max Design

www.maxdesign.com.au

Adaptive CSS-Layouts: New Era In Fluid Layouts? – Smashing Magazine

www.maxdesign.com.au

Заключение

Я надеюсь, приведенные выше примеры, статьи и фреймоврки помогут вам в конструировании своих резиновых макетом. Оставляйте комментарии и ссылки на ресурсы, которые могут быть полезны. Спасибо.

Дополнения

Отчет: количество посетителей с разными разрешениями экрана (dnzl.ru)

статистика посетителей с разным разрешением экрана

Использованы материалы следующей
статьи

Комментарии к статье

аватарка пользователя
2016-11-30
саша

куча битых ссылок ((

аватарка пользователя
2016-11-30
dnzl

ну таки год какой