Использование calc() с env (вставка безопасной области)

Я хочу использовать env(safe-area-inset-bottom), чтобы добавить margin-bottom к элементу, но только тогда, когда устройство является iPhone X. Однако поля добавляются с помощью env(safe-area-inset-bottom) мне не нравится, и я хочу добавить дополнительные 34 пикселя к нижнему полю.

    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);

Приведенный выше стиль добавляет соответствующее поле, однако, если устройство не является iPhone X, нижнее поле не возвращается к 0px. Это из-за calc(). Какие-либо предложения? Спасибо.


ios iphone css iphone-x calc
person awebdev    schedule 14.12.2017    source источник
comment
Это связано с тем, что устройства, отличные от iPhone X, по-прежнему поддерживают env(safe-area-inset-bottom), просто они, скорее всего, сообщают об этом как об нуле. Затем к 34px добавляется ноль. Что сделает нижний край на устройствах, отличных от iPhone X, 34px.   -  person Steve Schrab    schedule 04.02.2019

Ответы (3)


arrow_upward
9
arrow_downward

Вы можете обернуть вычисление в запрос @supports следующим образом:

.rule {
  margin-bottom: 34px;

  @supports (margin-bottom: env(safe-area-inset-bottom)) {
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  }
}

Если вы используете sass, вы можете написать вспомогательный миксин следующим образом:

@mixin supports-safe-area-insets {
  @supports (padding-top: env(safe-area-inset-top)) {
    @content;
  }
}

Что вы можете использовать следующим образом:

.rule {
  margin-bottom: 34px;

  @include supports-safe-area-insets {
    margin-bottom: calc(env(safe-area-inset-bottom) + 34px);
  }
}
person Michael Wolthers    schedule 29.06.2018

arrow_upward
2
arrow_downward

Функция env css имеет второй резервный параметр. https://developer.mozilla.org/en-US/docs/Web/CSS/env

env(safe-area-inset-bottom, fallback)

Итак, вы можете сделать:

margin-bottom: calc(env(safe-area-inset-bottom, -34px ) + 34px);
person Haim Lankry    schedule 12.06.2020

arrow_upward
1
arrow_downward

Вы можете попробовать умножить 34px на env(safe-area-inset-bottom); поэтому, когда вставка равна 0, это будет 0 + 34px * 0 = 0px

margin-bottom: calc(env(safe-area-inset-bottom) + 34px * env(safe-area-inset-bottom));
person ngood97    schedule 15.01.2018
comment
Также я не уверен, является ли это проблемой для вас, но если у вас возникли проблемы с тем, что calc является недопустимым вводом в других браузерах, вы захотите использовать запасной вариант, например: Строка 1: margin-bottom: 0px ; Line2: нижняя граница: calc(env(безопасная область-вставка-нижняя) + 34px * env(безопасная-область-вставка-дно)); - person ngood97; 16.01.2018