Сайт

Как сделать сайт под любое разрешение экрана: Как адаптировать сайт под разные мониторы / Skillbox Media

24.06.2023

html — Как сделать чтобы видео на фоне подстраивалось под разрешение экрана, но и мотать вниз можно было?

Вопрос задан

Изменён 1 год 3 месяца назад

Просмотрен 188 раз

У меня есть видео на фоне.

#myVideo {
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1000;
  opacity: 1;
}
<video autoplay muted loop>
    <source src="../mp4/Fon_2.mp4" type="video/mp4">
</video>

Как сделать чтобы видео подстраивалось под разрешение экрана, но и мотнуть, чтобы видео уходило вверх? Вообщем как на этом сайте https://rpcs3. net/

  • html
  • css
  • css3
  • html5
  • видео
1

Все просто 🙂

#myVideo {
  width: 100vw;
  height: 100vh;
}
<video autoplay muted loop>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
1

в отдельный div оберни его и все, и будет у тебя видео в фоне блока, а не всего backround

а, ну и

...
position: fixed;
...

тогда не нужен

Ну и вариант номер два, это подключить jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg=»path/video» к нужному блоку.

<div data-vide-bg="/demo/vide/video">
    <div>
        Адаптивное видео для фона
    </div>
</div>

вот тут описано: https://atuin.ru/blog/adaptivnoe-video-dlya-fona-bloka/

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как центровать обьекты на странице вне зависимости от разрешения экрана?

Я часто вижу на сайтах, как у них контент в центре в блоке, а блок всегда (при разном масштабе и разрешениии экрана) в центре страницы. Я уже пробовал <center></ceter> и <div align="center"></div> и

#ид дива{margin/padding:50%;} но всё равно, если внутри дива сделать position:absolute;, то всё не в центре, а как прописано в left/right: и top/bottom:

Помогите, как сделать блок, всегда находящийся в середине страницы/другого блока, желательно без Css3. И ещё один вопрос, 🙂 чтобы сделать по ширине до конца странице надо width: 100%, а как по высоте от текущей позиции сделать до конца страницы?

  • html
  • css
1

горизонтальное центрирование блока фиксированной ширины

div{
    width: 150px;
    margin: 0 auto;
}

горизонтальное центрирование блока плавающей ширины

чтобы задать высоту блока равную 100% высоты видимой части страницы её же (width:100%) нужно задать ещё и тегу html и тегу body

2 

postion: absolute

не влияет на центрирование элемента. с помощью этого свойства можно абсолютно расположить его относительно родительского элемента. то есть Вы жёстко указываете, где должен располагаться элемент. поэтому при разном разрешении — и сам элемент будет перемещаться. предыдущий совет — самый действенный способ. я им тоже всегда пользуюсь. есть ещё способ: указать отрицательную величину левого поля, равную половине ширины родительского элемента. в сочетании эти два способа дают практически точное центрирование элемента на странице.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как убедиться, что сайт подходит для всех разрешений экрана?

спросил

Изменено 3 года, 10 месяцев назад

Просмотрено 55 тысяч раз

Только что потратил несколько часов на написание нового сайта.

.. отлично смотрится в моем разрешении, 1366×768… Однако даже уменьшение до 1024×768 означает, что не все помещается в ширину экрана!!

Пробовал: