响应式网页设计：常见的响应断点

要使用媒体查询，您需要确定“响应式断点”或屏幕大小断点。断点是您使用媒体查询实现新CSS样式的屏幕宽度。

常见的屏幕尺寸

• 手机：360 x 640
• 手机：375 x 667
• 手机：360 x 720
• iPhone X：375 x 812
• Pixel 2：411 x 731
• 平板电脑：768 x 1024
• 笔记本电脑：1366 x 768
• 笔记本电脑或台式机：1920 x 1080

如果您选择移动优先的设计方法，以单列和较小的字体大小为基础，则不需要包含移动断点——除非您想针对特定模型优化设计。

移动优先设计（图片来源：silocreativo.com）

因此，您可以创建一个只有两个断点的基本响应式设计，一个用于平板电脑，一个用于笔记本电脑和台式电脑。

Bootstrap的响应式断点

作为最早也是最受欢迎的响应式框架之一，Bootstrap引领了对静态网页设计的攻击，并帮助将移动优先设计确立为行业标准。

结果，直到今天，许多设计师仍然遵循Bootstrap的屏幕宽度断点。

Bootstrap响应断点

他们使用媒体查询来定位横向手机 (576px)、平板电脑 (768px)、笔记本电脑 (992px) 和超大桌面屏幕 (1200px)。