Question

我使用以下代码渲染超小屏幕样式，并在我们正在使用的所有主要支持的浏览器（IE 11，Chrome，Firefox，edge）中进行了测试。我遇到的问题是，在调用.smallFixFooter时，margin-bottom不会被应用于在我的div堆栈之间创建一个空格。

CSS：

  @@media screen and (max-width:767){
    .smallDevices {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .ScreenStyle {
        height: 914px;
        margin-bottom: 10px;
    }

    .smallFixFooter {
        margin-bottom: 10px;
    }
}

HTML：

 <div class="col-xs-12 text-center smallDevices smallFixFooter largeDevices">
    <div class="col-md-4 col-xs-12 centerDiv footBorder smallFixFooter explorerStyleFoot" style="background-color:whitesmoke;">
        <div style="display:inline-block;width:70%" class="smallFixFooter bottomBoxFix">
            <h3><strong class="footerBoxHeader"></strong></h3>
            <p>
                <span class="explorerStyleSpan"></span>
                <audio controls id="explorerStyle" class="audioFix">
                    <source src="" type="audio/mp3" />
                </audio>
            </p>
        </div>
    </div>

    <div class="col-md-4 col-xs-12 centerDiv  footBorder smallFixFooter explorerStyleFoot" style="background-color:whitesmoke;">
        <div style="display:inline-block;width:70%" class="smallFixFooter">
            <h3><strong class="footerBoxHeader"></strong></h3>
            <p>
                <span></span><br />
                <button class="ComplianceImages" data-toggle="modal" data-target="#modalCarousel"><img src="" /></button>
            </p>
        </div>
    </div>

    <div class="col-md-4 col-xs-12 centerDiv smallFixFooter " style="background-color:whitesmoke;">
        <div style="display:inline-block;" class="bottomBoxFix">
            <h3><strong class="footerBoxHeader">foo</strong></h3>
            <p>
                <span></span>
                <button class="" data-toggle="modal" data-target="#modalCertificate"><img src="" /></button>
            </p>
        </div>
    </div>
</div>

编辑更新：我正在从这段jquery

中检索我的大小

 var w = window.innerWidth;
var h = window.innerHeight;

console.log(w,h)

它告诉我问题是我在宽度618处断开，这不是标准的bootstrap断点。

Answer 1

@media screen and（max-width：767）{

这是无效的媒体查询。

CSS中的任何长度值总是需要一个单位（除非该值恰好为0） - 所以要767px。

~~正如@Adrianopolis在评论中提到的那样，@@media也是不正确的，它只需要一个@ { - @media screen and ...~~

从媒体查询xs chrome和firefox接收CSS的问题

1 个答案: