响应式网站应该有多少种不同的分辨率/方向？

Question

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

例如，this website有五种（！）不同的布局，具体取决于浏览器的宽度，但大多数只有两种。

如果您希望自己的网站具有响应能力，是否应该至少满足一系列广泛认可的宽度？如果是这样，他们是什么？

Answer 1

我普遍同意Bootstrap如何做到 - 一个用于大型设备，一个用于大型移动设备（一个用于大型移动设备（如平板电脑），另一个用于移动电话设备（用于手机屏幕分辨率）和屏幕尺寸各不相同的地方）。

这些是：

超小型设备
电话（＆lt; 768px）

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

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

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

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

Answer 2

这取决于你的内容;你的内容应该推动你的断点。预先定义的设置断点可以对您的内容进行假设，甚至可以对您的内容将被查看的设备进行更多的假设。如果您有一个预先存在的响应网格，您可能必须使用它提供的现有断点，但理想情况下，您可以采用相反的方式 - 从最窄的支持宽度开始，并找出将布局更改为有意义的位置视口的宽度增长。关于您应该提前使用或定义多少个断点，没有规则甚至是“行业最佳实践”。