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

为了使用媒体查询，您需要识别“响应式断点”或屏幕尺寸断点。断点是您使用媒体查询应用新 CSS 样式时的屏幕宽度。

常见屏幕尺寸

• 移动设备：360 x 640
• 移动设备：375 x 667
• 移动设备：
• 移动设备：
  • 移动设备：360 x 775 360 2
  • P ixel 2：411 x 731
  • 平板电脑：768 x 1024
  • 笔记本电脑：1366 x 768
  • 笔记本电脑或台式机：1920 x 1080。字体大小，无需添加移动断点 - 除非您想要优化特定模型的设计。

    

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

    这样您就可以创建一个简单的响应式设计，只需两个断点，一个用于平板电脑，一个用于笔记本电脑和台式机。

    Bootstrap 响应式断点

    作为最早、最流行的响应式框架之一，Bootstrap 引领了静态网页设计的潮流，并帮助建立了移动优先设计的行业标准。

    因此，许多插件仍然遵守 Bootstrap 的屏幕宽度限制。

    

    引导响应断点

    他们使用媒体查询来定位横向手机（576像素）、平板电脑（768像素）、笔记本电脑（992像素）和非常大的桌面屏幕（1200像素）。