Динамическая адаптация отображения дашбордов

Есть ли возможность динамической адаптации отображения дашбордов на экранах различных устройств: стационарный экран/планшет/смартфон вертикально/смартфон горизонтально?

Масштабируемость элементов страниц может задаваться 2-мя способами.

Первый способ - свойство @ratio-scaling-enabled: true; - в новой версии Insight оно уже зашито в саму систему.

Второй способ - набором свойств:

@font-size-base:16px;
@min-screen-width:1600;
@media only screen and (min-width: ~"@{min-screen-width}px") {
  html {
    font-size: calc(100vw/@min-screen-width*unit(@font-size-base));
  }
} 

Коэффициент, на который будет умножаться базовый размер rem рассчитывается по формуле, выделенной заливкой.

Для большей части проектов достаточно первого способа. Второй способ следует использовать только в тех случаях, когда необходима верстка страниц под разрешения экрана ниже 1440x900 или выше 2560x1440 и может понадобиться уменьшение/ увеличение ширины экрана, после которой начинается увеличение единиц измерения rem. Ширина экрана задается в свойстве “ @min-screen-width:1600 “.

Для мобильных устройств в виду специфики их устройства разности принципов работы бразуера рекомендуется делать отдельные дашборды с вертикальной вёрсткой.

1 Like