У меня есть макет страницы, который я хотел бы сделать адаптивным. В настоящее время страница разделена 50/50 посередине по вертикали. Я добился этого, отобразив раздел div в виде таблицы, а элементы div внутри — в виде ячеек. У меня также есть заголовок с абсолютным позиционированием вверху по центру страницы.
Я хотел бы сделать так, чтобы при просмотре страницы на меньшем экране (например, планшете или мобильном телефоне) разделение 50/50 становилось горизонтальным, при этом весь содержащийся текст центрировался по горизонтали и вертикали, а заголовок оставался вверху -центр страницы.
Вот мой код:
html,
body,
section,
div {
height: 100%;
}
body {
color: #000000;
font-family: Cinzel, serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
div {
width: 50%;
padding: 1rem;
}
h1 {
font-size: 1.75rem;
}
.logo {
text-align: center;
color: red;
position: absolute;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.left-half {
background: #FFFFFF;
color: #000000;
}
.right-half {
background: #000000;
color: #FFFFFF;
}<body>
<section class="container">
<header class="logo">
<h1>Title</h1>
</header>
<div class="left-half cell">
<h1>First Half</h1>
</div>
<div class="right-half cell">
<h1>Second Half</h1>
</div>
</section>
</body>Любая помощь будет принята с благодарностью.
mediaзапросы... - person kukkuz schedule 28.08.2016