Я влюблен в эту супер простой шаблон:Есть ли способ сделать этот эффект параллакса отзывчивым? (CodePen внутри)
мне было интересно, как я мог бы сделать это хорошо выглядеть на мобильных устройствах. Я попробовал добавить медиа-запросы, в конечном итоге, испортил всю игру параллакса.
Любая помощь будет очень признательна!
Спасибо.
Прежде всего, вам нужно добавить следующие строки в настройках вашего HTML в codepen (обычно вы добавляете это внутри <head>.
<meta name='viewport' content='width=device-width'>
Теперь, когда вы будете готовы к отзывчивым вам нужно работать , как вы хотите, чтобы это выглядело на самом маленьком окне просмотра (мобильный первым).
в этом случае я обновил ширину, чтобы быть 80%, а не фиксированная em значения, но та же логика применима, добавив margin-left из отрицательная половина ширины.
#bannertext {
width: 80%;
position: fixed;
top: 20%;
left: 50%;
border: .5em solid #fff;
margin-left: -40%;
padding: 2em 0; }
Теперь, когда вы заработали на маленьких экранах, вы просто установили точки останова, включая либо другие процентные значения, либо фиксированные значения. Это только одна дополнительная точка останова, но вы должны увидеть, как вы можете расширить ее по вашим потребностям.
@media screen and (min-width:30em){
#bannertext {
max-width: 24em;
margin-left: -12em;
}
}
Большое спасибо, человек! Работал как шарм! – Marco