Сделать КАЖДЫЙ элемент пропорциональным при изменении размера окна - PullRequest
Новая
       13

Сделать КАЖДЫЙ элемент пропорциональным при изменении размера окна

0 голосов
/ 07 мая 2018

(я использую HTML, CSS, Bootstrap 3.3.7 с Gridsystem, я новичок в JS / jQuery)

Привет, ребята,

Я создаю SPA (одностраничное приложение), в котором есть несколько элементов, каждый 100vh, поэтому он должен выглядеть как 4 разных "слайда".

Моя проблема:

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

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

Я уверен, что есть знания, но, пожалуйста, помогите мне, я слишком глуп, я гуглил полчаса и ничего не нашел.

Знаете ли вы атрибуты и стили, которые мне нужно применить к моим элементам, чтобы избавиться от уродливого переупорядочения элементов? Чтобы дать вещи пропорциональное масштабирование.

Тысяча спасибо!

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Вам не нужно Flex для этого требования.

Вы можете легко запретить укладку блоков, просто используя col-xs-*

.block {
  height: 100vh;
  background: gray;
  border: 5px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 block"></div>
    <div class="col-xs-3 block"></div>
    <div class="col-xs-3 block"></div>
    <div class="col-xs-3 block"></div>
  </div>
</div>
0 голосов
/ 07 мая 2018 

.wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;

}
.item {
    display: flex;
    flex-direction: row;
    height: 90vh;
}
<div class='wrapper'>
<span class='item'>1</span>
<span class='item'>2</span>
<span class='item'>3</span>
<span class='item'>4</span>
</div>

Вы можете использовать этот фрагмент в качестве ссылки. Дайте мне знать, если я ошибаюсь.

...