Первое, что думают дизайнеры при создании своей веб-страницы, - это то, что разрешающая способность для разработки. На самом деле это сводится к решению, насколько широким должен быть ваш дизайн. Стандартной ширины веб-сайта больше не существует.
Зачем рассматривать разрешение
В 1995 году стандартные мониторы с разрешением 640 на 480 пикселей были самыми большими и лучшими из доступных мониторов. Это означало, что веб-дизайнеры сосредоточились на создании страниц, которые хорошо выглядели в веб-браузерах, на мониторе от 12 до 14 дюймов с таким разрешением.
В наши дни разрешение 640 на 480 составляет менее 1 процента большей части посещаемости веб-сайтов. Люди используют компьютеры с гораздо более высоким разрешением, включая 1366 на 768, 1600 на 900 и 5120 на 2880 пикселей. Во многих случаях проектирование для экрана с разрешением 1366 на 768 работает.
Тодя, у большинства людей большие широкоэкранные мониторы, и они не раскрывают окно браузера до максимума. Поэтому, если вы решите создать страницу шириной не более 1366 пикселей, ваша страница, вероятно, будет хорошо выглядеть в большинстве окон браузера даже на больших мониторах с более высоким разрешением.
Ширина браузера
При выборе ширины веб-страницы часто упускают из виду проблему, насколько велики ваши клиенты в своих браузерах. В частности, они максимизируют свои браузеры в полноэкранном режиме или они делают их меньше, чем в полноэкранном режиме?
После того как вы учтете клиентов, которые максимизируют или нет, подумайте о границах браузера. Каждый веб-браузер использует полосу прокрутки и границы по бокам, которые сокращают доступное пространство с 800 до примерно 740 пикселей или меньше при разрешении 800 на 600 и около 980 пикселей в развернутых окнах при разрешении 1024 на 768 резолюции. Это называется браузером хром и это может отнять полезное пространство для дизайна вашей страницы.
Страницы с фиксированной или жидкой шириной
Фактическая числовая ширина - это не единственное, о чем вам нужно подумать при разработке ширины вашего веб-сайта. Вам также необходимо решить, есть ли у вас фиксированная ширина или ширина жидкости. Другими словами, вы собираетесь установить ширину на определенное число (фиксированное) или процентное (жидкое)?
Фиксированная ширина
Страницы фиксированной ширины в точности такие, как звучат. Ширина фиксирована и равна определенному числу и не меняется независимо от размера браузера. Этот подход может быть хорош, если вам нужно, чтобы ваш дизайн выглядел точно так же, независимо от того, насколько широки или узки браузеры ваших читателей, но этот метод не принимает во внимание ваших читателей. Людям с браузером, более узким, чем ваш дизайн, придется прокручивать по горизонтали, а у людей с широким браузером на экране будет много пустого места.
Чтобы создать страницы с фиксированной шириной, используйте определенные номера пикселей для ширины разделов страницы.
Ширина жидкости
Страницы с жидкой шириной (иногда называемые страницы с гибкой шириной) различаются по ширине в зависимости от ширины окна браузера. Эта стратегия предлагает проекты, ориентированные больше на клиентов. Проблема со страницами с жидкой шириной в том, что их трудно читать. Если длина сканирования строки текста длиннее 10–12 слов или короче 4–5 слов, это может быть трудночитаемым. Это означает, что у читателей с большими или маленькими окнами браузера возникают проблемы.
Для создания страниц с гибкой шириной используйте проценты или ems для ширины разделов вашей страницы. Ознакомьтесь с CSS Максимальная ширина имущество. Это свойство позволяет вам установить ширину в процентах, но затем ограничить ее, чтобы она не стала настолько большой, что люди не смогут ее прочитать.
CSS Media Queries
Лучшее решение в наши дни - использовать медиа-запросы CSS и адаптивный дизайн для создания страницы, которая адаптируется к ширине просматриваемого браузером. Адаптивный веб-дизайн использует один и тот же контент для создания веб-страницы, которая работает независимо от того, просматриваете ли вы ее с шириной 5120 пикселей или 320 пикселей. Страницы разного размера выглядят по-разному, но содержат одинаковое содержание. С медиа-запросом в CSS3 каждое принимающее устройство отвечает на запрос своим размером, и таблица стилей подстраивается под этот конкретный размер.