当设备宽度小于 400 像素时，HTML/CSS 无法响应地工作

Question

如果有人可以快速查看此代码并提供建议，将不胜感激。

我有一些图像在 iPad 和 PC 屏幕上都能正确调整大小。但是，一旦您在手机上尝试/缩小浏览器窗口大小，图像就无法正确调整大小。

CSS:

.col-md-2 {   
    width: 16.66666667%;   
} 

HTML:

<div class="col-md-2 col-sm-4">
    <div class="timeline-thumb">
        <div class="thumb">
            <img src="images/timeline6.jpg" alt="">
        </div>
        <div class="overlay">
            <div class="timeline-caption">
                <a href="#"><h4>Wrapping Services</h4></a>
                <p>Click for more info</p>
            </div>
        </div>
    </div>
</div>

图像宽度为 170 像素，一行中有 6 个，当您将鼠标悬停在它们上面时，所有图像都以灰色突出显示(通过 CSS)。

当我将浏览器的大小调整为手机的大小时，它们会变得比以前更大!

非常感谢任何建议。

如果有人了解该主题并且可以提供帮助，请与我联系，我会尽力提供您需要的任何信息。

谢谢。

Answer 1

我想知道您是否在使用 Bootstrap。如果是这样，您应该为小型设备添加一个类，现在尝试将 col-xs-4 或 col-xs-6 添加到“col-md-2 col-sm-4”的 DIV 元素。