CSS响应式断点及主流框架规范

语法 👇👇👇

@media only screen and (max-width: 600px) {}

@media only screen and (orientation: landscape) {}

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {}

@media print {}

CSS @media 规则

各框架响应式断点规范 👇👇👇

Element (plus) UI

#	宽度
xs	<768px
sm	≥768px
md	≥992px
lg	≥1200px
xl	≥1920px

Ant Design

#	宽度
xs	480px
sm	576px
md	768px
lg	992px
xl	1200px
xxl	1600px

Tailwindcss

#	最小宽度
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Bootstrap

#	宽度	备注
xs	<768px	超小屏幕
sm	≥768px	小屏幕
md	≥992px	中等屏幕
lg	≥1200px	大屏幕