Question

我这里有代码，根据用户的屏幕尺寸确定要使用的广告的大小。我也做到了这一点，如果屏幕太小，广告就会以自动边距为中心。

当我使用google page-speed见解运行页面时，我收到此消息：

页面内容宽度为421 CSS像素，但视口宽度仅为411 CSS像素。以下元素位于视口之外：

元素广告落在视口之外。

这告诉我，元素Q在元素的左右两边都有10px的边距，但我从未宣布Q的边距。谷歌测试中的广告单元是320x100

HTML：

<div id="Q">
    Advertisement<br>
    <ins id="Z">
        <!-- adsense box -->
    </ins>
</div>

CSS：

@media screen and (max-width:450px){
    #Q{
        width:100%;
        margin:0
    }
    #Q,#Z{
        margin:auto;
        overflow:hidden
    }
}
#Q{
    float:left;
    margin:10px
}
#Z{
    display:block;
    width:234px;
    height:60px
}
@media screen and (min-width:319px){
    #Z{
        width:320px;
        height:100px
    }
}
@media screen and (min-width:470px){
    #Z{
        width:300px;
        height:250px
    }
}

我使用以下代码配置了视口：

<meta name="viewport" content="width=device-width,initial-scale=1">

这是在桌面浏览器上以各种分辨率测试的页面没有问题，这会产生上面的页面速度问题。

http://new.clubcatcher.com/m/pictures/bloke/2016apr02/1

我的CSS中是否有任何可能导致此问题的内容？我该怎么做才能解决它？

Answer 1

移动它：

#Q{
    float:left;
    margin:10px
}
#Z{
    display:block;
    width:234px;
    height:60px
}

到你的css文件的顶部。

您还应该放置此块

@media screen and (min-width:470px){

之前

@media screen and (min-width:319px){

Answer 2

线索在名称中。 CSS代表层叠样式表，因此任何具有相同特异性的CSS将始终被CSS堆栈中的最后一个CSS规则覆盖。在第一次媒体查询之后，CSS中的两个类将适用于所有媒体大小，因为您没有为这两个类指定一个类，并且由于它们位于第一个之后，因此它们将优先。

Answer 3

为#Q声明了一个保证金，导致此问题：

#Q{
    float:left;
    margin:10px
}

将其设置为margin: auto;，它会起作用。

此外，如果在另一种情况下你将无法修改属性，有两个简单的选项（尽管最好避免它们）：

使用!important标记设置新属性; e.g. margin: auto !important;
将新属性放在内联样式中（就像您对#Q进行文本对齐一样），该属性优先于链接样式表

宽度为100％的CSS元素落在视口之外

3 个答案: