Breakpoints
What is a "breakpoint"?
Breakpoint is a condition upon which layout acquires a new state. Such condition is often based on a device's characteristics like screen size, resolution, orientation, and others.
Atomic Layout operates with the same breakpoints you would use in plain CSS media queries.
Properties
The following properties can be used to describe a breakpoint:
Property name
Value type
Description
minWidthNumericMinimum device width.
maxWidthNumericMaximum device width.
minHeightNumericMinimum device height.
maxHeightNumericMaximum device height.
minResolutionStringMinimum screen resolution of the device.
maxResolutionStringMaximum screen resolution of the device.
aspectRatioStringDevice screen aspect ratio.
minAspectRatioStringMinimum aspect ratio of the device.
maxAspectRatioStringMaximum aspect ratio of the device.
scaninterlace | progressiveScanning process of the device.
orientationportrait | landscapeDevice viewport orientation.
displayModeenum:
fullscreen | standalone | minimal-ui | browserDisplay mode of the application specified in the
manifest.jsonDefault breakpoint name
Whenever a component's prop is not suffixed by a breakpoint name, a default breakpoint name is used.
The default breakpoint name is
xs, making mobile-first the default responsive behavior.Default breakpoints
Breakpoint name
xs (default)
sm
md
lg
xl
Screen width
<576px
≥576px
≥768px
≥992px
≥1200px
Configuration
​
Last modified 2yr ago