Здесь речь пойдет об ответе на вопрос в чем же заключается верстка сайта резиновая. Расскажу о том, какие методы создания макетов бывают. Также скажу немного о своей практике в создании таких макетов. Покажу на примере, как создается «тянущийся» макет. В общем прочтите и не пожалеете.
В чем заключается верстка сайта резиновая, практика и примеры.
Существуют три основных вида разработки макетов: резиновая, фиксированная и резиново-фиксированный вид. А также подвиды, это респонзитив верстка и адаптивная верстка.
Резиновая верстка заключается в том, что блоки из которых состоит макет, имеют ширину в процентах или ширина блока не указывается, при этом блок получается равным 100% т.к. разработчиками языка html сделано так, что если не задана ширина блока, то ширина блока будет равна 100%. Соответственно контент, который содержит такой блок, тоже должен масштабироваться исходя из ширины блока. При разработке такого макета горизонтальная полоса не появиться (только при очень маленьком разрешении). На мониторах имеющих большое разрешение, макет «расползется» и шаблон потеряет свой первоначальный вид, что только отпугнет от него пользователей.
Фиксированная верстка – это когда блок, имеет ширину находящегося в нем контента. Если сделать макет на мониторе с шириной экрана 1280 пикселей, то при просмотре такого макета на мониторе с меньшим разрешением, будет появляться горизонтальная полоса прокрутки и ее нужно будет переместить, чтобы увидеть все содержимое макета. Это неудобно т.к. посетитель зайдя на такой ресурс может не догадаться или ему будет просто лень и он закроет этот ресурс, не увидев какую-то важную информацию. А при просмотре такого макета на большом мониторе или экране телевизора, все будет нормально и никакой горизонтальной полосы прокрутки не появится.
Резиново-фиксированная верстка – на мой взгляд это лучшая из всех трех видов. Т.к. при ее использовании можно добиться самого наилучшего отображения проекта на мониторах с маленьким разрешением, также и на мониторах с большим разрешением, но тогда нужно будет указать максимальную ширину макета. Данный вид реализации проекта подразумевает, что к блоку с фиксированной шириной, «прикрепляется» блок с «тянущейся» шириной. В результате такого создания проекта, горизонтальная полоса прокрутки появляется, если общая ширина фиксированных блоков лежащих на одной линии, меньше ширины разрешения монитора.
Адаптивную верстку и респонзитив верстку можно отнести к подвиду, одной из эти хтрех видов разработки ресурса. Эти виды разработки веб-ресурса используются, если нужно чтобы готовый проект также корректно отображался на мобильных устройствах и чтобы отсутствовала горизонтальная полоса прокрутки.
Адаптивная верстка, использует медиа запросы, которые записываются в стилевом файле. В таком запросе можно указать, что определенный блок при маленьком разрешении из «тянущегося» должен стать «фиксированным» или этот блок должен быть скрыт и т.п.
Респонзитив верстка, управляет контентом содержащимся в блоке, таким как изображения или видео.
Сделать ресурс, чтобы он хорошо выглядел как на мобильном устройстве, так и на экране большого телевизора можно, если использовать резиново-фиксированный метод создания макета и адаптивную верстку. Если возникнет необходимость, то необходимо применить респонзитив верстку. Можно конечно из любого вида разработки проекта сделать отличное отображение на всех видах экранов, но это займет больше времени.
Практика резиновой верстки сайта на основе личного опыта.
Наилучшая практика резиновой верстки сайта достигается, путем создания отдельных фиксированных блоков для макета. За исключением одноколоночных макетов, таких как форумы, различные лендинги и т.п. А затем, если этот создаваемый сайт впоследствии будет адаптироваться под экраны для мобильных телефонов.
При создании шаблона для форума, используется резиновая таблица. Ее использование хорошо скажется, при просмотре форума с такой таблицей на экране телевизора с указанием максимальной ширины, но возникнут проблемы при просмотре данного форума на мобильном устройстве. Из-за использования таблиц. Поэтому если планируете использовать резиновый шаблон, то старайтесь меньше использовать таблиц при создании макета.
Если вы создаете сайт для присмотра на большом экране, то резиновый блок нужно ограничивать при помощи cssсвойств, так как если этого не сделать, то резиновый блок растянется на весь экран. Это испортит внешний вид сайта, что только отпугнет пользователей. И в дальнейшем они не посетят ваш сайт, даже если они сменят устройство просмотра веб-сайтов, т.к. они не знают тонкости создания такого макета.
Резиновая верстка сайта примеры ее реализации.
В этой части материала, я расскажу вам, как используется резиновая верстка сайта примеры ее реализации тоже продемонстрирую.
Как писалось выше создание шаблона форумабез адаптации , то такой шаблон плохо будет выглядеть на мобильных устройствах. А как такой шаблон реализуется на форуме, посмотрите ниже:
Еще один пример, как выглядит сетка лендинга:
Ну и на конец, работа над трехколончным сайтом с фиксированными по ширине левой и правой колонки:
Как видно из рисунка, сам блок резиновый, а внутри этого блока находятся два блока с фиксированной шириной. Эти фиксированные блоки, имеющие правостороннюю и левостороннюю ориентации, а контент соответственно имеет отступыравной ширине фиксированных блоков. В результате чего, ширина контентной части зависит от шириныэкрана и также становиться резиновой.
Для тестирования такого подхода к требуемой задаче, если разрешение экрана меньше вашего, то нужно просто сузить ширинубраузера или увеличить масштаб просмотра проекта в браузере. И наоборот, для тестирования проекта на то, как он будет выглядеть на большом экране, нужно уменьшить масштаб просмотра проекта в окне вашего браузера.
Если у вас возникли вопросы или вы плохо воспринимаете текст, то посмотрите видео о том как создается резиновый макет:
В данном материале, вы узнали в чем заключается верстка сайта резиновая. Узнали практику применения такой верстки. И увидели на примерах как верстается резиновый макет.
Автор: Спивак Алексей
Если Вам понравилась данный материал, выберите социальную сеть в которой Вы зарегистрированы, чтобы поделиться этой статьей со своими друзьями.
