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

Question

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

我有一些图像在 iPad 和 PC 屏幕上都可以正确调整大小。但是，一旦您在 phone/reduce 浏览器 window 大小上尝试它，图像就无法正确调整大小。

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）。

当我将浏览器调整为 phone 时，它们变得比以前更大！

非常感谢任何建议。

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

谢谢。

Answer 1

我想了解您是否在使用 Bootstrap。如果是这样，您应该为小型设备添加一个 class，现在尝试向 "col-md-2 col-sm-4" 的 DIV 元素添加一个 col-xs-4 或 col-xs-6。

Answer 2

看起来像 Bootstrap。如果是这样，请将 img-responsive helper class 添加到您的图像中。

<img class="img-responsive" src="images/timeline6.jpg" alt="">

这将使您的图像按比例缩放并填充包含 div 的 100% 宽度，无论视口大小如何。

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

HTML/CSS not working responsively when device is less than 400px wide

html

css

media

responsive-design

device-width