CSS媒体查询定义的最佳实践

Question

在您看来，在定义媒体查询时最好的方法是什么：

1）使用max-width属性，如下所示：

.element {
    width: 50%;
}

@media(max-width:992px) {
    .element {
        width: 100%;
    }
}

2）使用min-width属性，如下所示：

.element {
    width: 100%;
}

@media(min-width:992px) {
    .element {
        width: 50%;
    }
}

我在某处读到像Bootstrap这样的大多数框架遵循“移动优先”方法（基本上是第二种选择），但我不明白为什么。对我来说，认为“桌面优先”感觉更自然。您对此有何看法/经历？

Answer 1

为何选择Mobile First？

首先，人们普遍认为，随着视图端口大小的增加，开发网站并将 新元素带到页面更容易，而不是缩小和带走 元素。

此外，您会发现虽然媒体查询通常得到良好支持，但旧设备可能根本不支持它们，您可能会向这些用户显示未优化的页面。