html - 在 2 个特定点中 Bootstrap 响应问题

Question

这是我的 Bootstrap 网站:http://www.feather.com.lk/index.php

我的主要问题是 iPad 纵向 View 。元素未按预期调整大小。但是，对该问题的进一步调查表明，只有当浏览器大小缩小到 768px 和 769px 时，我才会遇到这个问题。我不确定如何解决这个问题。

我使用的媒体查询:

@media screen and (min-width: 0px) and (max-width:769px)  
@media screen and (min-width: 770px) and (max-width: 992px)  
@media screen and (min-width: 993px) and (max-width: 1199px)  
@media screen and (min-width: 1200px)

Answer 1

您的媒体查询与 Bootstrap 提供的媒体查询似乎不匹配。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

( Bootstrap Media Queries )

正如您在此处所见，最小的 Bootstrap 媒体查询占用的最大宽度为 767px(注意下一个从 768px 开始)。但是，您使用过的最小媒体查询最多占用 769px 的宽度。这一定是为什么有两个像素的原因，网站看起来不像预期的那样。

尝试将您的媒体查询更改为与 Bootstrap 中的相同。