Адаптация сайта под разные расширения экрана

Адаптация сайта под разные расширения экрана

Прошло время, когда у всех были одинаковые мониторы, сейчас мир электроники пестрит разнообразием размеров и форм мониторов, и других портативных устройств. Для веб-разработчиков от этого возникает несколько проблем, порой очень весомых, потому что необходимость отображения сайта на разных устройствах с разнообразным расширением экрана должна быть одинакова, сохранять общую задумку дизайнеров и функциональность сайта. На данный момент времени — это один из ключей успеха веб-проекта.

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

Решение №1

Идея этого решения заключается в том, чтобы основная часть сайта с контентом была с фиксированной шириной 960 px, а фон под ним растягивался или сжимался в зависимости от расширения экрана устройства. Это достигается путем вставки картинки фона большого расширения, либо бесшовной текстуры, которая будет трансформироваться под изменяемое расширение монитора. Важно то, если используется картинка высокого расширения достигнуть оптимального ее размера в соотношении к качеству. Большой объем картинки может негативно отразиться на скорости загрузки сайта. У этого варианта могут возникать некоторые проблемы при верстке:

• Для маленьких мониторов (смартфонов и планшетов) может понадобиться дополнительное создание css-стилей.

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

Решение №2

Верстать сайт полностью в фиксированных единицах px, а затем переводить в условные единицы em. Об этом способе хорошо написано в книге Люка Вроблевски «Сначала мобильные!», приводятся примеры и руководство к действию. В таком случае тратиться на верстку много времени, однако оно того стоит. Во-первых, возникает меньше проблем, нежели при решении №1. Во-вторых, легче достигнуть одинакового отображения абсолютно на любых расширения экрана. В-третьих, это неплохой шаг в сторону кроссплатформенности сайта.

Решение №3

Решение №3 можно назвать гибридом описанных выше вариантов. Заключается в том, чтобы в css-стилях для каждого типового расширения экрана писать свои стили, точнее сказать описываются ключевые моменты, относящиеся к общему внешнему виду сайта, без потери идеи дизайна и правильного и функционального отображения контента. Этим способом верстаются мобильные версии сайтов.

Также можно долго не мучаться и просто заказать сайт в студии zakazatsajt.ru, там сделают сайт, красиво смотрящийся на различных устройствах: от ПК до мобильного телефона.

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


Оставить комментарий