在媒体查询中使用逻辑属性不起作用答案

【问题标题】：Using Logical Properties Inside Media Query Isn't Working在媒体查询中使用逻辑属性不起作用
【发布时间】：2019-05-04 16:28:41
【问题描述】：

我正在尝试在媒体查询中使用max-inline-size（新的逻辑属性），但它似乎不起作用。

在英语中它将是 max-width:1000px;在日语中它会 max-height:1000px

/*Not Working*/
@media (max-inline-size:1000px){
  .main-content{
    background:Red;
    grid-template-columns:auto;
  }
}

【问题讨论】：

【解决方案1】：

max-inline-size 不在媒体功能中。

使用max-height :显示区域的最大高度，如浏览器窗口或max-width :显示区域的最大宽度，如浏览器窗口

例子：

@media (max-width:1000px){
  .main-content{
    background:Red;
    grid-template-columns:auto;
  }
}

【讨论】：

【解决方案2】：

如前所述，逻辑属性是属性，而不是媒体功能，因此不能在媒体查询中使用。书写模式是页面上元素的属性，而不是正在查看页面的浏览器或媒体。您似乎正在寻找一个元素查询，doesn't exist in CSS。

【讨论】：