html - 响应式网站应满足多少种不同的分辨率/方向？

Question

人们普遍认为，标准显示器的最佳网站宽度在过去几年中从 800 像素增加到 1024+ 像素（网站通常为 960 像素宽），但随着移动设备的兴​​起，这些分辨率被认为是“关键”迎合？

例如，这个网站有五个（！）不同的布局，取决于浏览器的宽度，但大多数似乎只有两个。

如果您希望您的网站具有响应性，是否至少应该满足一系列公认的宽度？如果是这样，它们是什么？

Answer 1

我通常同意Bootstrap的做法——一种用于大型设备，一种用于中型设备，一种用于大型移动设备（如平板电脑），最后一种用于移动电话设备（因为手机屏幕分辨率和屏幕尺寸在整个地方）。

这些是：

超小型设备
电话（<768px）

小型设备
平板电脑（≥768px）

中型设备
台式机（≥992px）

大型设备
台式机（≥1200px）

哦，顺便说一句，Bootstrap IMO 是创建响应式网站的最佳 css 框架，基本上可以在任何东西上运行（只需记住自定义 css 以使您的网站看起来更原始）。

Answer 2

这取决于您的内容；你的内容应该驱动你的断点。具有预定义的设置断点会假设您的内容，甚至更多地假设您将在其上查看您的内容的设备。如果您有一个预先存在的响应式网格，您可能必须使用它提供的现有断点，但理想情况下您可以反过来 - 从支持的最窄宽度开始，并找出将布局更改为有意义的地方视口的宽度会增加。关于您应该提前使用或定义多少个断点，不再有任何规则甚至“行业最佳实践”。