Vue ResponsiveBox - Size Qualifiers

When choosing the layout for a specific screen, the UI component 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 property 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.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.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