Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 28.03.2024

Наверх

Наверх

Ширина веб-страницы

С развитием настольных компьютеров и мобильных устройств появилась необходимость создавать такие сайты, дизайн которых легко подстраивался бы под любой размер экрана. Адаптивность стала жизненно необходимым свойством сайта, поскольку на него может зайти как пользователь ПК, так и пользователь планшета или смартфона. И если раньше адаптивный дизайн считался чем-то необязательным, то сейчас сайт, который не подстраивается под любой тип устройства, пользователи сочтут устаревшим.

Чаще всего страницы сайта создаются на основе фиксированной либо относительной (непостоянной) ширины. Ниже мы опишем плюсы и минусы каждого варианта, а также поговорим про адаптивный веб-дизайн.

Фиксированная ширина страницы

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

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

Непостоянная ширина страницы

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

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

Адаптивный дизайн страницы

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

Определять стили для страницы, основываясь на ширине окна браузера, можно благодаря медиазапросам (Media Queries). Как вы наверняка помните, мы уже пробовали знакомиться с ними на практике ранее в книге.

Чуть позже в данном разделе мы обязательно вернемся к технике создания адаптивного дизайна. А пока что далее в книге пойдет речь о таком понятии как блочная верстка.