@konstant1n13

Может ли smartgrid работать по высоте?

Всем доброго времени суток!

Может ли библиотека 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);
  • Вопрос задан
  • 27 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы