Примените «padding: env ()» ко всему телу, кроме специального класса - PullRequest
Новая
       15

Примените «padding: env ()» ко всему телу, кроме специального класса

0 голосов
/ 28 апреля 2020

Я хотел бы оптимизировать свой веб-сайт для iPhone X (и выше). По умолчанию есть область безопасности, которую я хочу изменить.

Все на моем сайте должны иметь эту область безопасности, поэтому я выделил все тело 

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Но я получил несколько полноэкранных фоновых изображений Я не хочу, чтобы этот отступ применялся. padding: 0; не работает.

Как мне "отрицать" этот отступ для моих фоновых изображений? Я также попробовал его с 

body:not (.background) { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}

, но он также не работал.

Я прикрепил скрипку , чтобы вы могли видеть структуру моего кода. Единственная проблема: вы увидите это только на iPhone X или выше, а не на devtools.

Большое спасибо. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 28 апреля 2020

Мне кажется, я понимаю, о чем вы спрашиваете, если это так, это должно решить вашу проблему.

Поместите div в HTML вашего документа, который находится непосредственно внутри тега body: 

<body>
   <div id="body-content">
      <!-- The content of your page will all go here -->
   </div>
</body>

А затем для отступа просто примените его к своему контенту div: 

#body-content {
   padding: env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
}

Это должно позволить фону вашего тела достигать краев экрана, пока ваш контент по-прежнему оптимизирован для мобильных экранов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...