Фоновое изображение не реагирует на Nuxt.js - PullRequest
Новая
       15

Фоновое изображение не реагирует на Nuxt.js

0 голосов
/ 09 ноября 2019

Я недавно начал разрабатывать приложение Nuxt, и оно провалилось на стороне CSS на очень ранних этапах. Для моей проблемы, которая кажется очень повторяющейся в этой области, это отзывчивый фон. Пока что все выглядело хорошо, если не открывать в мобильном браузере.

Я хочу поместить изображение в фоновом режиме, и каждый компонент контента / vue и т. Д. Перед ним. Вот что я попробовал до сих пор:

Я проверил на веб-сайте Chrome (с растяжением и растяжением вверх и вниз и выглядел правильно), инструменты разработчика Chrome (различные реакции на мобильность также прошли и видели bg-imageпокрывает весь экран). Но;Я открыл веб-сайт на своем телефоне и попросил некоторых из моих друзей проверить, что все они отправляют одну и ту же проблему, она не растягивается (покрывает) на мобильном телефоне.

https://ibb.co/k129BrQ этот безpadding в index.vue мобильным браузером

https://ibb.co/PD5Sfyc этот с 1000px padding-top в index.vue мобильным браузером

https://ibb.co/PD5Sfyc этот с 1500pxpadding-top в index.vue, но инструменты chrome dev в настройках iphone X (также то, что я ожидал и хотел увидеть)

-website

- assets

--css

---- main.css 

body {
    background: url('../img/background.jpg') no-repeat fixed;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;   
}

--- макеты

---- default.vue 

<template>
    <div>
        <nuxt />
    </div>

</template>

<script>
    export default {

    }
</script>

--- pages

---- index.vue 

<template>
  <div>
    <h1>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
  </div>
</template>

<script>
export default {
  layout: 'default'
}
</script>

Я ожидал увидеть весь экран мобильного браузера, покрытый изображением, но я понял это;Он охватывает контент, созданный приложением, если контент не может достичь конца экрана, он не будет отображаться так, как я ожидал.

1 Ответ

0 голосов
/ 11 ноября 2019

Я думаю, что это не проблема nuxt, а, как вы сказали, скорее проблема css. Я предполагаю, что ваш контейнер, который определяется размером содержимого, недостаточно велик, чтобы растягиваться по вертикали на экране. Таким образом, вам может потребоваться применить некоторые дополнительные CSS для этого: 

.container-which-contains-bg {
  min-height: 100vh;
}

Достигается ли это, чего вы хотите?

Если это так, вы должны знать, что vh вызывает некоторыепроблема на сафари iOS. Там вам, возможно, придется пойти на min-height: 100%;, а также установить все ваши обертки на 100%. (например, body, head и все остальное, что окружает ваш div-контейнер изображения).

Редактировать: Извините, в вашем случае вы применяете стиль к body. Таким образом, вы можете использовать body { min-height: 100vh; } или body { height: 100%; } и установить html { height: 100%; }. (Я не уверен, что тело и голова должны быть min-height: 100%; или height: 100%;. Просто попробуйте ...

...