响应式设计的屏幕尺寸断点

[Dream4ever]

资料整理

目前有一些页面需要实现响应式设计（Responsive Design），要在桌面端和移动端分别呈现不同的样式，如果要通过 CSS 来区分，那么就要用到媒体查询（@media）这个功能。

TailwindCSS 将常见的屏幕尺寸分为五类：

Stack Overflow 上则有一篇帖子专门讨论这个知识点：Media Queries: How to target desktop, tablet, and mobile?。

目前在一个业务中，自己只是简单地用屏幕宽度值 640px 来区分桌面端和移动端设备，小于等于它的都认为是移动端设备，否则认为是桌面端设备。