Использование логических свойств внутри медиазапроса не работает

Question

Я пытаюсь использовать max-inline-size (новые логические свойства) внутри медиа-запроса, но, похоже, это не работает.

Идея, что на английском языкеэто будет максимальная ширина: 1000 пикселей;и на японском это будет max-height: 1000px

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

CodePen Пример

Answer 1

Как уже упоминалось, логические свойства - это свойства, а не функции мультимедиа, и поэтому их нельзя использовать в запросе мультимедиа.Режим записи - это свойство элемента на странице, а не браузера или носителя, на котором просматривается страница.Вы, похоже, ищете запрос элемента, которого не существует в CSS .

Answer 2

max-inline-size отсутствует в Media Features.

Use max-height: максимальная высота области отображения, например, окна браузера или max-width: максимальная ширина дисплеяобласть, например окно браузера

Пример:

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