html - 无法选择图像以使其在小屏幕设备上变小

Question

我有 6 张图像，我需要它们在小屏幕上更小。但是我不能使用媒体查询使它们变小。我认为这与选择有关。

这是我当前的代码：

/* on large screens */
.devices {
    height: 5.5em;
    width: 11.5em;
    margin: 0 1em;
}

/* Here is the problem, this code doesn't work */
@media (max-width: 768px) {
    .devices {
        height: 4.5em;
        width: 9.5em;
    }
}

<section>
        <div class="container" id="applied-padding">
            <div class="row">
                <div class="col-sm-4">
                    <h2 id="h2-compatible">Paisjet e mbeshtutura Online TV</h2>
                </div>
                <div class="col-sm-8" id="compatible-with">
                    <img src="images/on-android-min.png" class="devices" alt="android">
                    <img src="images/on-android-min.png" class="devices" alt="android">
                    <img src="images/on-android-min.png" class="devices" alt="android">
                    <img src="images/on-android-min.png" class="devices" alt="android">
                    <img src="images/on-android-min.png" class="devices" alt="android">
                    <img src="images/on-android-min.png" class="devices" alt="android">
                </div>
            </div>
        </div>
    </section>

标签： htmlcss

Answer 1

尝试这个

@media screen and (max-width: 768px) {

}