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
Демо страничка
  • +16
  • 5.7k
  • 6
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 6

    –1
    Напомните, как связаны SASS-миксины и полуголая спортивная девушка?
      0
      Гибкостью и растяжкой
      +1

      Раньше тоже пользовался разными хелперами для определения мобильник это или планшет, но в конце концов пришел к тому, пропасть между 320 и 768 огромная и часто нужен брейкбоинт на 480 или даже 640 пикселей, и в итоге получаются всякие mobile-small, mobile-large, аналогично с десктопами 1280 и 1440 приличная разница особенно при наличии свйдбаров. В итоге проще писать тупо пиксели, чем вспоминать что есть desktop-small. Привязываться к конкретным устройствам я считаю вообще вредным, настоящий адаптив должен на любых разрешениях выглядеть хорошо.

        0
        Был как то проект, с придирчивым заказчиком, так пришлось делать 2 для смартфонов(320/480), 3 для планшетов(600/768/1024), и 3 для пк (1280/1920/2560).
          0

          Полностью согласен, даже при одинаковой логике работы с блоками на 320-768, все равно где-то какой-то блок будет не такой на 480+, по сравнению с 480-, поэтому мы делаем обычно 320-768, плюс отдельные стили для 480+ (или 480- в зависимости от условий) с более высоким приоритетом, получается небольшой оверхед по размеру из-за того что перекрытие стилей идёт, но по сравнению с двумя отдельными версиями, это более экономный вариант.

          +1
          Да, пиксели писать проще, но лучше все же использовать миксины потому, что:
          1. Изменения будут происходить одновременно.
          2. На больших проектах, где несколько фронтендщиков, нужны правила, чтобы не было хаоса.

          Only users with full accounts can post comments. Log in, please.