jQuery 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
Feedback