adaptive.ru.md

Адаптивная вёрстка

Эти возможности определены в файле _adaptive.scss.

Определение ширины устройства

Фреймворк предоставляет пять примесей для разделения стилей по размерам экрана. При этом фреймворк рассчитан на использование подхода сначала мобильные.

for-phone-and-wider

Примесь для указания стилей для экранов $device-phone-width и шире.

for-tablet-portrait-and-wider

Примесь для указания стилей для экранов $device-tablet-portrait-width и шире.

for-tablet-landscape-and-wider

Примесь для указания стилей для экранов $device-tablet-landscape-width и шире.

for-desktop-and-wider

Примесь для указания стилей для экранов $device-desktop-width и шире.

for-wide-screens

Примесь для указания стилей для экранов $device-widescreen-width и шире.

Пример

@include block(header) {
    // Стили для всех устройств.
    
    @include for-phone-and-wider {
        // Стили для телефонов и более широких экранов.
    }
    
    @include for-tablet-portrait-and-wider {
        // Стили для вертикальных планшетов и более широких экранов.
    }
    
    @include for-tablet-landscape-and-wider {
        // Стили для горизонтальных планшетов и более широких экранов.
    }
    
    @include for-desktop-and-wider {
        // Стили для настольных компьютеров и более широких экранов.
    }
    
    @include for-wide-screens {
        // Стили для широкоформатных экранов.
    }
}

Масштабирование

TODO