A breakpoint is a specific screen width at which the layout of an app or web page will change. For example, a breakpoint with min-width of 576px means that when the screen width is 576 pixels or more, the layout will change to efficiently use the screen real estate.
Here is a list of the predefined breakpoints and their abbreviations in Radzen Blazor Components, optimized for a wide range of devices.
xs
- Extra Small ≥ 576px
sm
- Small ≥ 768px
md
- Medium ≥ 1024px
lg
- Large ≥ 1280px
xl
- Extra Large ≥ 1920px
xx
- Extra Extra Large ≥ 2560px
Breakpoints are primarily used in layouts. For example, you can define the width of a RadzenColumn
component by setting the respective Size
property. E.g. SizeMD="6"
See Column demos to learn how to adjust your page layouts using breakpoints.
Breakpoints can also be used with the Spacing CSS utility classes for margin
and padding
. For example, you can define the margin of an element by setting the respective .rz-m-{breakpoint}-{size}
CSS class. E.g. .rz-m-md-1
See Spacing demos to learn how to use breakpoints with margins and paddings.
Source Code licensed under
MIT
Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.
Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.