Какую ширину браузера я должен использовать для дизайна сайта?

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

В современную эпоху веб-дизайна ширина браузера не имеет значения. Существует так много разных устройств, что вам НУЖНО сделать свои проекты отзывчивыми , чтобы они работали на экране любого размера.

Чтобы сделать это, вы должны использовать какую-то сетку с изменяющейся шириной и целевые устройства, используя запросы @media .

Медиа-запросы - это просто разные наборы правил CSS для разных размеров портов просмотра. Медиа-запросы также реагируют на динамическое изменение ширины вашего браузера. Когда вы уменьшаете размер своего браузера, страница реагирует, опуская поплавки или переходя от 12 столбцов к 1 или 2. Реагирование также реагирует на пользователей мобильных устройств и таблиц, когда они меняют ориентацию с книжной на альбомную или наоборот.

Целевые размеры:

• Мобильное устройство 320 x 480 в портретном режиме
• 480 х 640 маленьких планшетов или айфон в ландшафтном режиме
• 768 x 1024 планшета в портретном режиме
• Планшет 1024 x 768 в ландшафтном режиме
• 1200+ настольных браузеров
• 2900 ++ большие мультимедийные дисплеи или конференции (Это не обязательно, но что, если кто-то просматривает ваш сайт на очень большом дисплее.

Чтобы увидеть это в действии, взгляните на Безрамную сетку . Это на самом деле не плавный, но, как вы настраиваете свой браузер, он идет от 14 столбцов вплоть до 1

Twitter Bootstrap , простая платформа CSS, HTML и JS, созданная с использованием популярных компонентов пользовательского интерфейса, также является хорошим примером современных адаптивных методов проектирования.

Еще одна вещь, которую вы также можете учитывать, это плотность пикселей . IPhone 4 и новый iPad имеют сетчатые дисплеи, которые в 2 раза резче, чем обычные экраны. Это делает практику обслуживания спрайтов и изображений вместо текста почти устаревшей. На iPad изображения с текстом выглядят ужасно.

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

Многие шаблоны макетов используют ширину 960 пикселей, так как это соответствует общему разрешению экрана 1024 пикселей, дает некоторое пространство для полосы прокрутки и легко делится на 2, 3, 4, 5, 6, 8, 10, 12 и 16 - идеально для колонизации расположение.

Смотрите http://960.gs для примера.

Другие фреймворки, такие как bootstrap, используют 940px для учета полей между столбцами.

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

Разрешение экрана StatCounter

Почему около 1000 пикселей, когда наиболее типичные дисплеи имеют 1024 пикселей или больше? Потому что вы должны учитывать полосы прокрутки и окна Chrome.

Если вы специально ориентируетесь на мобильные браузеры, то хорошим выбором может быть ширина 320 пикселей, хотя мобильные браузеры обычно масштабируют контент в соответствии с шириной просмотра, поэтому ширина 950 или 960 пикселей может быть большой. Обратите внимание, что 320 пикселей CSS / HTML равны 640 пикселям устройства на устройствах с высоким DPI, таких как iPhone.

Разрешение экрана мобильного StatCounter

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

Кроме того, как вы строите сайт? Если вы используете систему сетки, такую ​​как Blueprint CSS или 960 Grid System, то это также может определять размер (большинство систем сетки также можно изменить на другие размеры).

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

в настоящее время размер клеветнического рабочего стола во всем мире составляет 1024x768, и хорошо сделать сайт размером 1003px ...