Sass MediaScreen — Определяем девайсы на CSS

Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.


Кстати, демку потыкать тут.

Сразу пара оговорочек:

• Не проверяйте адаптивность в браузерном DevTools, там неправильно расчитываются размеры сторон в ландшафтной ориентации устройства. Проверять лучше на реальном устройстве или в симуляторе (например, xCode Simulator).
• Используйте group-css-media-queries для объединения одинаковых медиа запросов. Без него генерируется много повторяющегося кода @media ..., если ради удобства использовать миксин @include device() в каждом селекторе отдельно. Обёртка для Gulp — gulp-group-css-media-queries.

Установка

Скачиваем библиотеку:

$ yarn add sass-mediascreen
или
$ npm install sass-mediascreen
или
$ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss

И подключаем миксины в наше приложение:

@import "mediascreen";

Примеры

Вот так можно проверять конкретные устройства:

@include device(iPhone5, portrait) {
    // portrait orientation
    // iPhone 5, iPhone 5s, iPhone 5c, iPhone SE
}
@include device(iPhone6Plus iPhoneXR, landscape) {
    // landscape orientation
    // iPhone 6+, iPhone 6s+, iPhone 7+, iPhone 8+, iPhone XR
}
@include device(iPadPro10 iPadPro11 iPadPro12) {
    // all orientations
    // iPad Pro 10.5, iPad Pro 11, iPad Pro 12.9
}

Вот так группы устройств:

@include device(desktop) {
    // all orientations
    // desktop
}
@include device(mobile tablet laptop, landscape) {
    // landscape orientation
    // mobile, tablet, laptop
}
@include device(mobile-landscape tablet laptop) {
    // landscape orientation
    // mobile

    // all orientations
    // tablet, laptop
}
@include device(mobile-landscape tablet laptop, portrait) {
    // landscape orientation
    // mobile

    // portrait orientation
    // tablet, laptop
}

А это стандартные миксины для проверки размеров экрана (от, до) и текущей ориентации устройства:

@include screen(min-width, max-width, orientation) {/*...*/}
@include min-screen(width) {/*...*/}
@include max-screen(width) {/*...*/}

@include screen-height(min-height, max-height, orientation) {/*...*/}
@include min-screen-height(height) {/*...*/}
@include max-screen-height(height) {/*...*/}

@include landscape() {/*...*/}
@include portrait() {/*...*/}

Список поддерживаемых устройств

Группы

— Мобильники 320-767px — mobile, mobile-portrait, mobile-landscape
— Планшеты 768-1023px — tablet, tablet-portrait, tablet-landscape
— Лаптопы 1024-1199px — laptop, laptop-portrait, laptop-landscape
— Десктопы >=1200px — desktop, desktop-portrait, desktop-landscape

Телефоны

— iPhone 5, 5s, 5c, SE — iphone5, iphone5s, iphone5c, iphonese
— iPhone 6, 6s, 7, 8 — iphone6, iphone6s, iphone7, iphone8
— iPhone 6+, 6s+, 7+, 8+ — iphone6plus, iphone6splus, iphone7plus, iphone8plus
— iPhone X, XS — iphonex, iphonexs
— iPhone XR — iphonexr
— iPhone XS Max — iphonexsmax

Планшеты

— iPad 1, 2, Mini, Air — ipad1, ipad2, ipadmini, ipadair
— iPad 3, 4, Pro 9.7" — ipad3, ipad4, ipadpro9
— iPad Pro 10.5" — ipadpro10
— iPad Pro 11.0" — ipadpro11

Лаптопы

— iPad Pro 12.9" — ipadpro12

Увы, по размерам экрана, iPad Pro 12 — это лаптоп!

Расширение списка устройств

Как я говорил ранее, можно добавлять поддержку кастомных девайсов или групп устройств без правки исходников библиотеки. Для этого, перед импортом @import "mediascreen", нужно объявить Sass-переменную $ms-devices со списком своих девайсов:

$ms-devices: (
    desktop-sm: (
        group: true, // флаг означает - группа девайсов
        min: 1200px,
        max: 1919px,
    ),
    desktop-md: (
        group: true,
        min: 1920px,
        max: 2879px,
    ),
    desktop-lg: (
        group: true,
        min: 2880px,
    ),
    pixel2xl: (
        group: false, // флаг означает - конкретный девайс
        width: 411px, // or 412px?..
        height: 823px,
        pixel-ratio: 3.5,
    ),
    macbook12: (
        group: false,
        orientation: landscape,
        width: 1440px,
        height: 900px,
        pixel-ratio: 2,
    ),
    imac27: (
        group: false,
        orientation: landscape,
        width: 5120px,
        height: 2880px,
    ),
);
@import "mediascreen";

После этого проверять свои устройства можно также, как и стандартные устройства библиотеки:

@include device(desktop-sm) {
    // desktop-sm
}
@include device(desktop-md) {
    // desktop-md
}
@include device(desktop-lg) {
    // desktop-lg
}
@include device(Pixel2XL, landscape) {
    // landscape orientation
    // Google Pixel 2XL
}
@include device(MacBook12) {
    // landscape orientation
    // MacBook 12
}
@include device(iMac27) {
    // landscape orientation
    // iMac 27
}

Ссылки

Библиотека на GitHub
Библиотека в репозитории Npm
Демо страничка