支持视口单元

Question

我正在使用视口单元设计自适应网站，现在我遇到了有关max-width的问题。见下面的例子：

.container{
   width: 90%;
   max-width: 1024px;
   /*now I want to override max-width to none if viewport unit is supported*/
   max-width: none;
}

但它会覆盖其他不支持视口单元的浏览器。

Answer 1

没有办法使用max-width：none;仅适用于支持视口单元的浏览器（使用css）。

虽然您可以通过在视口单元中使用max-width来欺骗您的布局，如下所示：

.container{
   width: 90%;
   max-width: 1024px;
   max-width: 100vw;
}