Стационарные компьютеры, ноутбуки, нетбуки, планшеты, смартфоны и даже телевизоры. Это устройства, каждый из которых доступен с различными размерами экрана. В случае мобильных устройств это еще и два варианта ориентации (вертикальная / горизонтальная).

Возьмем, еще и факт, что не обязательно использовать веб-браузер в развернутом окне. И таким образом мы получаем невероятное количество размеров окна, в котором могут быть отражены веб-страницы.

Популярность в частности расширения (размер в пикселях) изменяется с развитием технологии экрана. В течение многих лет царствовал 1024 × 768, но осенью 2011 года передал корону для расширения 1366 × 768, которая остается на первом месте и сегодня.

 

Как заставить страницу выглядеть хорошо?

 

Система постоянной ширины

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

 

«Резиновая» верстка

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

 

Адаптивная верстка Bootstrap

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