css - max-width none 对于那些支持视口(viewport)单位的浏览器

Question

我正在使用视口(viewport)单位设计响应式网站，现在我遇到了关于最大宽度的问题。参见下面的示例:

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

但它会覆盖其他不支持视口(viewport)单位的浏览器。

Answer 1

没办法用max-width: none;仅适用于支持视口(viewport)单元(使用 css)的浏览器。

虽然您可以通过在视口(viewport)单元中使用最大宽度来欺骗您的布局，如下所示:

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