Всем доброго времени суток!
Может ли библиотека Smartgrid работать по высоте также, как она работает по ширине?
Я бы хотел, чтобы можно было писать стили для устройств с одинаковой шириной, но разной высотой на этой библиотеке без использования дополнительных медиа-запросов. (Вот iPhone X 375px * 812px в Chrome DevTools, а iPhone 6/7/8 375px * 667px, т.е при одинаковой ширине X более вытянутый и часто бывает, что для устройств его типа нужно писать дополнительные медиа-запросы, чтобы нормализовать внешний вид этих элементов на таких узких и вытянутых устройствах, как iPhone X.
Я бы хотел, чтобы примерно такой код в smart-grid-config.js срабатывал:
var smartgrid = require('smart-grid');
/* It's principal settings in smart grid project */
var settings = {
outputStyle: 'scss',
/* less || scss || sass || styl */
columns: 12,
/* number of grid columns */
offset: '30px',
/* gutter width px || % || rem */
mobileFirst: false,
/* mobileFirst ? 'min-width' : 'max-width' */
container: {
maxWidth: '90%',
/* max-width оn very large screen */
fields: '5%' /* side fields */
},
breakPoints: {
iPadPro: {
width: '1024px',
height: '1400px'
},
iPad: {
width: '820px',
height: '1060px'
},
surfaceDuo: {
width: '600px'
//height: '760px'
},
pixel2XL: {
width: '440px',
height: '860px'
},
iPhoneX: {
width: '440px',
height: '840px'
},
pixel2: {
//same to iPhone 6/7/8 Plus
width: '440px',
height: '760px'
},
iPhone678: {
width: '400px',
height: '700px'
},
galaxyS5:{
width: '400px',
height: '680px'
},
iphone5SE: {
width: '345px',
height: '600px'
},
galaxyFold: {
width: '320px',
height: '700px'
}
/*
We can create any quantity of break points.
some_name: {
width: 'Npx',
fields: 'N(px|%|rem)',
offset: 'N(px|%|rem)'
}
*/
}
};
smartgrid('./app/assets/scss', settings);