Какова сейчас ширина макетов веб-сайтов для компьютеров и мобильных устройств?

Короткий ответ: его нет.

Если вы хотите, чтобы ваш веб-сайт был подготовлен для использования в огромном диком мире, вы должны помнить о любой ширине экрана, скажем, от 480 до 4800 пикселей. Современные дизайнеры адаптивного веб-дизайна (дизайна, который адаптируется к ширине области просмотра) работают с диапазонами ширины . Каждый диапазон имеет свои особенности для адаптации сайта к ширине.

Границы этих диапазонов не высечены на камне.

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

Размер пикселя больше не является показателем типа устройства.

Имейте в виду, что размер экрана в пикселях не обязательно указывает на тип используемого устройства: в наши дни на рынке есть небольшие телефоны, которые используют экраны Retina, эффективно удваивая ширину своих пикселей без изменения физических размеров (намного). Следовательно, у вас может быть телефон с разрешением 960 пикселей, а не монитор с разрешением 800 пикселей. (По общему признанию, эти последние редкость в наши дни.)

Я считаю, что лучше использовать две монтажные области шириной от 320 до 1600 пикселей для каждой.

Разница между ними заключается в том, что в мобильной версии ширина области вашего контента соответствует стандартному размеру мобильного экрана 320 пикселей, а на артборде 1600 пикселей — 980 пикселей (мое предпочтение, так как это более изящно с точки зрения кросс-совместимости между размеры экрана) и 1200 пикселей (так что вы получаете немного фона, чтобы поместиться в область просмотра ноутбука, которая идет от 1280 пикселей и выше).

Вы всегда можете добавить артборд для планшета, но мой опыт подсказывает мне, что двух для мобильных и настольных компьютеров достаточно, что дает разработчикам интерфейсов приятное чувство свободы, когда дело доходит до гибкого макета, который может быть немного непредсказуемым однажды. вы начинаете загружать в него активы (чтобы вещи не обрезались или не нужно было придерживаться размера, который может не работать между контрольными точками (обычно это 320 пикселей, 480 пикселей, 768 пикселей, 980 пикселей и 1280 пикселей).

Существует два основных фреймворка : Bootstrap (от Twitter) и Foundation (от Zurb), они являются наиболее часто используемыми веб-фреймворками. Я рекомендую начать там, чтобы увидеть размеры. Вот код и размеры, которые они используют.

Начальная загрузка

 /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

Фундамент

    // Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

Я лично использую Sketch 3 и начинаю с 850px для настольных компьютеров и мобильных устройств 320px Вот один шаблон 3 также для Sketch google bootstrap-3-responsive-grid-template.sketch (я не могу вставить более 2 ссылок)

Я использую общие рекомендации Bootstrap. Я обнаружил, что виртуальные устройства ненадежны. Я использую три или четыре реальных устройства (одно из них iPad), а также мой настольный монитор. Бюджетные планшеты и бюджетные телефоны с Wi-Fi без SIMS и экранами разных размеров достаточно недороги, чтобы на них можно было увидеть, как выглядит моя работа. Чем больше экран, тем меньше требуется внимания к точности позиционирования (обычно!), поэтому я не чувствую, что мне нужен полноразмерный планшет.

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

Те, которыми я пользовался и могу порекомендовать:

• расширение Chrome «Responsive Web Design Tester», которое предоставляет вам список распространенных устройств Apple и Android и создает окно браузера с таким размером пикселей.

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