Bootstrap网格系统在电话上出现意外结果

时间:2018-08-07 22:22:27

标签: twitter-bootstrap

我当时使用720p分辨率的旧笔记本电脑上的引导网格系统制作了一个网页,以为它仍然可以在更高的分辨率下使用。我并不是想在较小的设备(低分辨率的设备)上工作,而是使用col-md来整理内容。

无论如何,它在720p笔记本电脑和1080p台式机上看起来都很棒,但是当我使用在风景中也是1080p的手机时,所有东西都被挤在一起了(即使将其放在风景视图中也是如此)。

难道不应该将手机放在横向上提供与我的相同分辨率的桌面几乎相同的视图?当然,它不应该比我什至更低分辨率的实验台更紧凑。

2 个答案:

答案 0 :(得分:0)

我也想尝试使用col-sm,而不会看到您的代码,并且在手机上进行测试之前,您可以打开chrome dev工具并打开响应功能以在不同的视口中进行测试。

答案 1 :(得分:0)

720p与视口宽度不同。 720p就是720水平线的分辨率。它没有说明像素尺寸。

Bootstrap使用像素确定断点。第一个移动断点为768px;

您的手机显示屏的视口像素数非常不同,您将无法在桌面显示屏上准确复制此像素。

为所有大于768px的视口设计为台式机,为小于768px的任何视口设计移动版。