‎McIntosh Media Bridge for iPad on the App Store

‎a!media sever-dlna,upnp server

‎dlna browser

‎imediashare

Media queries for standard devices

‎medium

‎my firstmedia

‎vlc for mobile

‎wylsacom media

Инвертированные цвета

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

Зачем включать инвертирование системных цветов? Обычно это очень полезно, если хочется улучшить читаемость.

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

У данной функции есть только два значения:

Вот пример! Когда цвета инвертируются, размер текста увеличивается

.text {
  font-size: 24px;
}
 
@media screen and (inverted-colors: inverted) {
  .text {
    font-size: 36px;
  }
}

Пожалуйста, обратите внимание, что в данный момент эта функция поддерживается только в Safari (на macOS и iOS). Всегда актуальный список поддерживаемых браузеров можно найти здесь

Медиа запросы для iphone

@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

@media screen and (max-width: 420px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2), screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi)
    .l-wrapper
        flex-direction: column
        .l-item
            width: 100%

    .projects
        figure.project
            width: 100%
            margin-right: 0

    .edu-places
        .edu-place
            span
                &.period
                    padding-top: 3em

                    &:before
                        top: 3em
    .h-wrapper
        flex-direction: column
        align-items: center

@media screen and (max-width: 768px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2), screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi)
    #wrapper
        flex-direction: column

    #header
        flex: 1

    #main
        flex: 1

Наведение и указатель

Итак, я попробую объяснить эти медиа-функции как можно проще, ведь они достаточно полезны.

Обе медиа-функции hover и pointer относятся к определению основного механизма ввода на сайте. Например, мышь. Или палец, если вы используете смартфон. Чтобы определить все механизмы ввода, можно использовать функции any-hover и any-pointer.

А теперь перейдем к тому, что же они делают?

Функция hover (и any-hover) позволяет браузеру узнать, может ли основной механизм ввода наводиться на элементы (например, как курсор мыши).

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

Когда это стоит использовать? Например, когда вы хотите обрабатывать анимацию наведения на мобильных устройствах, где механизм ввода (палец) не может наводиться на элементы.

Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указатель (например, мышь) и если имеет, то насколько он точный.

Вы можете использовать эту функцию для определения основного механизма ввода, который:

Это полезно, например, для увеличения области нажатия на устройства с неточным указателем

Эй, это всё скучно. Где новые крутые функции, о которых упоминалось раньше?

Вот они!

Учтите, что следующие функции являются экспериментальными и в данный момент имеют очень ограниченную поддержку.

Ориентация экрана

Orientation

– это хорошая медиа-функция, которая позволяет вам производить изменения в зависимости от ориентации дисплея. Она может иметь два значения:

portrait

(портрет) и

landscape

(пейзаж/альбом).

Но что браузер считает портретом, а что пейзажем? Значение портрета будет инициировать изменения каждый раз, когда высота области видимости больше ширины. Аналогично, если ширина больше высоты, вьюпорт будет считаться «альбомным».

Например, этот код даёт следующий результат:

/* Красный фон применяется только, если ориентация экрана альбомная */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (orientation: landscape) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

‎оффлайн — плеер для музыки

Предпочитаемая цветовая схема

Это одна из моих любимых функций, и я надеюсь, что постепенно она станет популярной.

Функция позволяет разработчикам устанавливать различные варианты оформления для элементов, если изменяется цветовая схема. И Windows и macOS позволяет пользователям менять системную цветовую схему со светлой на тёмную и обратно. iOS 13 также представила эту функцию, а для пользователей Android эта возможность станет доступной с приходом Android Q.

Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах её также поддерживают все основные браузеры, кроме Opera. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Значения для этой функции достаточно понятны интуитивно:

Посмотреть, насколько крута эта функция, можно в примере ниже!

.appbar {
  background-color: #EE4266;
}
 
.fab {
  background-color: #424242;
}
 
@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: #424242;
  }
 
  .appbar {
    background-color: #212121;
  }
 
  h2 {
    color: #fff;
  }
 
  .fab {
    background-color: #EE4266;
  }
}

Установка системной тёмной темы делает страницу также тёмной

Примеры

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

@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() {/*...*/}

Размер вьюпорт

Да, я говорю о

width, height, min-width, min-height, max-widthmax-height

Нуждаются ли они в особом представлении? Я буду краток.Эти медиа-функции используются для установки разных стилей для разных размеров экрана. Они очень полезны при разработке отзывчивой системы.

Поскольку функции width и height могут устанавливать стили только для точно заданного размера области видимости, более вероятно, что вы будете использовать префиксы max- и min-. Например, в следующем коде стили будут применяться, только если высота вьюпорт больше 320 пикселей.

/* Красный фон применится, только если высота вьюпорт больше 320 пикселей */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (min-height: 320px) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

Но вы также можете смешивать эти функции для обработки диапазона размеров

/* Красный фон применится, если ширина области видимости от 320 до 600 пикселей */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (min-width: 320px) and (max-width: 600px) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

Следующий пример демонстрирует, как можно использовать функцию max-width для изменения цвета фона в зависимости от ширины области видимости

body {
  background-color: #0EAD69;
}
 
@media screen and (max-width: 1600px) {
  body {
    background-color: #3BCEAC;
  }
}
 
@media screen and (max-width: 1280px) {
  body {
    background-color: #FFD23F;
  }
}
 
@media screen and (max-width: 960px) {
  body {
    background-color: #EE4266;
  }
}
 
@media screen and (max-width: 600px) {
  body {
    background-color: #540D6E;
  }
}

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

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

@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
}

Сокращение количества анимации

Это также очень важно. Лично я люблю анимации и переходы, и я думаю, что правильная анимация может действительно улучшить удобство взаимодействия с сайтом. Но не всем нравятся анимации и, что более важно, у некоторых людей могут быть вестибулярные расстройства, из-за которых может возникать укачивание и головокружение. Я нашел полезную

, которая очень хорошо объясняет подобные явления.

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

Эта функция может иметь два значения:

Проверьте эту функцию в примере ниже:

.pulse {
  animation: pulse 2s infinite;
}
 
@media screen and (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

Анимация пульсации прекращается, когда пользователь выбирает снижения подвижности элементов

Браузерная совместимость для этой функции достаточно хорошая. В данный момент только Edge и IE не поддерживают её. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Соотношение сторон

Данная медиа-функция похожа на функцию ориентации, но является более точной. Вы можете установить правила для конкретного необходимого соотношения сторон. Например, можно установить разную разметку для телефонов с экранами 16/9 и 18/9.

Эта функция также может иметь префикс max- и min- для обработки диапазона экранов с разным соотношением сторон

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

Группы

— Мобильники 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

Планшеты

Установка

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

Заключение

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

Хотелось бы упомянуть еще о некоторые функциях, как например, light-level, которая может использоваться для проверки уровня окружающего освещения, но большинство недавно представленных функций медиавыражений всё еще не имеют поддержки ни одним из браузеров, так что… еще не пришло время.

Примеры кодаВы можете ознакомиться с примерами кода здесь. Код находится в открытом доступе на Github.

Кто мыМы команда молодых разработчиков и дизайнеров, находящихся в Падуя, Италия. Мы разрабатываем мобильные приложения и веб-сайты и всегда готовы создавать что-то великое