- PVSM.RU - https://www.pvsm.ru -
Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.
Кстати, демку потыкать тут [1].
@media ...
, если ради удобства использовать миксин @include device()
в каждом селекторе отдельно. Обёртка для Gulp — gulp-group-css-media-queries [4].Скачиваем библиотеку:
$ 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 [5]
Библиотека в репозитории Npm [6]
Демо страничка [1]
Автор: Павел
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/sass/332860
Ссылки в тексте:
[1] демку потыкать тут: http://mediascreen.gvozdb.ru/
[2] неправильно расчитываются размеры сторон: https://codepen.io/gvozdb/pen/bPQmvv
[3] group-css-media-queries: https://github.com/Se7enSky/group-css-media-queries
[4] gulp-group-css-media-queries: https://github.com/avaly/gulp-group-css-media-queries
[5] Библиотека на GitHub: https://github.com/gvozdb/sass-mediascreen
[6] Библиотека в репозитории Npm: https://www.npmjs.com/package/sass-mediascreen
[7] Источник: https://habr.com/ru/post/471044/?utm_source=habrahabr&utm_medium=rss&utm_campaign=471044
Нажмите здесь для печати.