媒体 css3 无法在 safari 浏览器上运行答案

【问题标题】：media css3 is not working on safari browser媒体 css3 无法在 safari 浏览器上运行
【发布时间】：2014-02-23 21:15:00
【问题描述】：

我正在为浏览器调整大小或小型设备上显示的 3>>2>>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;
    }
}

【问题讨论】：

为什么不在第一个媒体查询中使用单位？例如@media (min-width: 1632px)
omg....我犯了一个多么大的错误。自过去两周以来，我一直在寻找我的代码以找出愚蠢的错误，但找不到.....感谢您的观察。它现在可以工作了:-)

标签： css twitter-bootstrap safari media-queries

【解决方案1】：

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

【讨论】：

这并不一定意味着该页面在 Safari 上根本无法运行。他们也没有在他们的网站上提到 Firefox 和 Opera 的 Linux 版本，但在这些和 Windows 版本之间引导页面的行为方式确实没有明显区别。
同意。我们不应该根据支持与否...我们应该坚持基本标准，然后看看不支持的内容。

【解决方案2】：

看起来您在@media (min-width:1632) 之后缺少“px”

@media (min-width:1632px)

这应该可以解决它。

【讨论】：