viewport-breakpoints

Viewport Breakpoints

reference ) CSS breakpoints for responsive design - LogRocket

1. Group Devices

• I personally prefer 4 types.

• Small - Medium - Large - Extra Large

2. Pick breakpoints wisely

• criteria 1) break by content

• criteria 2) break by device

• I prefer the latter one.

3. Breakpoints used in popular CSS frameworks

• Bootstrap4

Breakpoint	Dimensions
X-small	< 576 px
small	>= 576 px
medium	>= 768 px
large	>= 992 px
extra large	>= 1200 px
2x large	>= 1400 px

• TailwindCSS

Breakpoint keys	Dimensions
(none)	< 640px
sm	> 640 px
md	>= 768 px
lg	>= 1024 px
xl	>= 1280 px
2xl	>= 1536 px