Question

我在浏览器调整大小或小型设备上显示3>＆gt;＆gt; 2＆gt;＆gt; 1列的自定义引导程序。我使用过css3媒体查询，它可以在除Safari之外的所有浏览器上运行。以下是我用过的css。它总是使用第一个媒体查询，因此它在Safari上引起问题。我测试了Mac和Window Safari并遇到了同样的问题。请帮忙。

在HTML标题部分添加了视口

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

使用的CSS3：

/*Apply different margin based on media size*/
@media (min-width:1632)
{
.two-column .row-fluid [class*="span"]:nth-child(3n+1)
    {
        margin-left:100px;
    }
}

@media (min-width: 981px) and (max-width: 1631px)
{
    .two-column .row-fluid [class*="span"]:nth-child(2n+1)
    {
     margin-left:100px;
    }

}

@media (min-width: 982px) and (max-width: 1155px)
{
    .two-column .row-fluid [class*="span"]:nth-child(2n+1)
    {
     margin-left:10px;
    }

}

@media (min-width: 545px) and (max-width: 981px)
{
    .two-column .row-fluid .span6  
    {
     margin-left:5%;
    }

}


@media (max-width: 546px)
{
    .two-column .row-fluid .span6  
    {
     margin-left:5px;
    }
}

Answer 1

Bootstrap显式不支持Windows Safari，如其浏览器支持文档中所述。

Answer 2

看起来你错过了@media（min-width：1632）

之后的'px'

@media (min-width:1632px)

这应该解决它。

media css3无法在safari浏览器上运行

2 个答案: