Question

我无法获取图片以响应媒体查询。我知道查询路径有效，当我使用display: none属性时图像消失。

我想做的是，“不要漂浮”＆＃39;图像＆＃39;在较小的屏幕尺寸，所以它位于标题文本下面。

我无法让float: none属性在媒体查询中工作。

以下是HTML中的图片

<header class="headercontainer">
    <img src="img/MR.jpg" class="profile-photo">
    <p>30 years experience in Metro-Detroit law</p>
    <h1>Marcia Ross</h1>
</header>

.headercontainer .profile-photo {
    /*display: block;  Will allow us to use auto margins to center the element*/
    max-width: 150px;
    margin: 0 25% 30px -150px;
    /* Here is from above, margin auto technique to center the image   the img is actually defaulted inline display */
    border-radius: 100%;
    float: right;
}
.headercontainer .profile-photo {
    /*display: block;  Will allow us to use auto margins to center the element*/
    max-width: 150px;
    margin: 0 25% 30px -150px;
    /* Here is from above, margin auto technique to center the image   the img is actually defaulted inline display */
    border-radius: 100%;
    float: right;
}
@media screen and (max-width: 943px) {
    .bragbanner {
        display: none;
    }
    .headercontainer img {
        float: none;
        display: inline-block;
        text-align: center;
    }
}

Answer 1

您的媒体查询选择器正被

上方的选择器覆盖

.headercontainer .profile-photo

您需要在媒体查询选择器中更加具体，例如：

.profile-photo

Answer 2

为什么在媒体查询中到处使用.headercontainer .profile-photo？

一个元素（在这种情况下为img）的specificity低于一个类 - 这就是为什么你的CSS没有按预期工作的原因。

将媒体查询中的选择器更改为与前面的选择器相同，例如：

@media screen and (max-width: 943px) {
    .headercontainer .profile-photo {
        /* Rules */
    }
}

float：none在媒体查询中无法正常运行

2 个答案: