For optimal user experience, material design interfaces need to be able to adapt their layout at various breakpoints. MatBlazor uses a simplified implementation of the original specification.
Each breakpoint (a key) matches with a fixed screen width (a value):
Breakpoint | Size | Description |
---|---|---|
XS | 0px | extra-small |
SM | 600px | small |
MD | 960px | medium |
LG | 1280px | large |
XL | 1920 | extra-large |
These breakpoint values are used to determine breakpoint ranges. A range starts from the breakpoint value inclusive, to the next breakpoint value exclusive: