All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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
CSS
$(function() {
    $("#responsiveBoxContainer").dxResponsiveBox({
        // ...
        screenByWidth: function(width) {
            if (width < 640)
                return 'xs';
            if (width < 1280)
                return 'sm';
            if (width < 1920)
                return 'md';
            return 'lg';
        }
    });
});
html, body { height: 100%; }
Angular
HTML
TypeScript
CSS
<dx-responsive-box ...
    [screenByWidth]="getSizeQualifier">
    <!-- ... -->
</dx-responsive-box>
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
    ],
    // ...
})
html, body { height: 100%; }
Vue
HTML
<template>
    <DxResponsiveBox ...
        :screen-by-width="getSizeQualifier">
        <!-- ... -->
    </DxResponsiveBox>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxResponsiveBox } from 'devextreme-vue/responsive-box';

export default {
    components: {
        DxResponsiveBox
    },
    data() {
        return {
            getSizeQualifier(width) {
                if (width < 640)
                    return 'xs';
                if (width < 1280)
                    return 'sm';
                if (width < 1920)
                    return 'md';
                return 'lg';
            }
    }
};
</script>
<style>
html, body { height: 100%; }
</style>
React
HTML
CSS
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import ResponsiveBox from 'devextreme-react/responsive-box';

class App extends React.Component {
    render() {
        return (
            <ResponsiveBox ...
                screenByWidth={this.getSizeQualifier}
            />
        );
    }

    getSizeQualifier = (width) => {
        if (width < 640)
            return 'xs';
        if (width < 1280)
            return 'sm';
        if (width < 1920)
            return 'md';
        return 'lg';
    }
}

export default App;
html, body { height: 100%; }
See Also