Отзывчивая маржа в css
Я сделал какой-то сайт, похожий на Youtube, для изучения.
При уменьшении размера браузера в главном YouTube левое и правое поля также уменьшаются.
Есть ли какой-нибудь трюк с CSS?
Может быть, мне нужно использовать margin: auto, но я точно не знаю, что мне делать.
Мой макет здесь ->
<div class = "wrap">
<div class = "section">
123
</div>
</div>
высота и ширина обертки составляет 100%, а раздел имеет margin-left: 75px;, margin-right: 75px;
Спасибо.
Вы должны установить ширину .section (px или%), а затем margin: 0 auto; к. раздел
Что происходит если вы используете margin: auto;?
То, что сказал Йонас, правильно: не используйте px, если он должен быть масштабируемым. Так что просто используйте%. Вы также можете использовать медиа-запросы, когда он становится большим / маленьким из-за процента. Затем вы можете поместить туда новые «правила» определенной ширины.
Ответы 2
margin: 0 auto; - это то, что вам нужно:
.wrap {
width: 100%;
background: red;
}
.section {
width: calc(100% - 150px);
margin: 0 auto;
height: 100vh;
background: orange;
}<div class = "wrap">
<div class = "section">
123
</div>
</div>Я имею в виду, что если уменьшить размер браузера, левое и правое поле .section также уменьшится.
@Hide, поэтому используйте значение "%" вместо 150 пикселей.
.wrap {
width: 100%;
background: #bababa;
}
.section {
width: calc(100% - 75px);
margin: 0 auto;
height: 100vh;
background: #7b7b7b;
color:#fff;
font-size:18px;
text-align:center;
line-height:100vh;
}<div class = "wrap">
<div class = "section">123</div>
</div>
Было бы лучше, если бы вы также включили свой стиль, почему бы не взглянуть на единицы просмотра или медиа-запросы.