DevExtreme React - Size Qualifiers

When choosing the layout for a specific screen, the widget considers the screen's size qualifier. There are four size qualifiers in all.

Size Qualifier Description
xs Stands for "extra small". Screens with width less than 768 pixels.
sm Stands for "small". Screens with width between 768 and 992 pixels.
md Stands for "medium". Screens with width between 992 and 1200 pixels.
lg Stands for "large". Screens with width more than 1200 pixels.

If a size qualifier should be identified with other screen width values, use the screenByWidth option to specify the relation.

jQuery
JavaScript
$(function() {
    $("#responsiveBoxContainer").dxResponsiveBox({
        // ...
        screenByWidth: function (width) {
            if (width < 640)
                return 'xs';
            if (width < 1280)
                return 'sm';
            if (width < 1920)
                return 'md';
            return 'lg';
        }
    });
});
Angular
HTML
TypeScript
<html style="height:100%">
    <body style="height:100%">
        <dx-responsive-box ...
            [screenByWidth]="getSizeQualifier">
            <!-- ... -->
        </dx-responsive-box>
    </body>
</html>
import { DxResponsiveBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    getSizeQualifier (width) {
        if (width < 640)
            return 'xs';
        if (width < 1280)
            return 'sm';
        if (width < 1920)
            return 'md';
        return 'lg';
    }
}
@NgModule({
    imports: [
        // ...
        DxResponsiveBoxModule
    ],
    // ...
})
See Also