Медиа-запросы — проект колледжа для начинающих по HTML и Css
Существует проект, который требует от учащегося создать простое меню или список с объектами любого типа (сделал это внутри div и класса — меню), и когда вы измените размер экрана, он будет реагировать за счет использования мультимедиа. запросы.
Есть шесть объектов.
Максимальное разрешение покажет объекты в строке вверху — все готово, все просто.
В среднем разрешении два объекта будут отображаться рядом, в двух столбцах, то есть в основном сетка 3x2 (строка x столбец). Я понятия не имею, почему, но элементы перекрываются и не остаются в определенном месте, как должны. Пробовал использовать шаблон сетки, но как-то это не очень эффективно. Понятия не имею, неправильный ли синтаксис, но, возможно, я что-то упустил.
В низком разрешении объекты будут отображаться в виде вертикального списка — все готово, тоже просто сделать.
Чтобы было легче анализировать и пытаться найти ошибку, я поместил все в один и тот же html-код ниже.
<main>
<head>
<style>
@media (min-width:769px) {
.menu {
color: rgb(200,0,0);
background-color: white;
display:inline-block;
width: 16%;
}
.menu2 {
color: rgb(200,0,0);
background-color: white;
display:inline-block;
width: 16%;
}
}
@media (min-width:481px) and (max-width: 768px){
.parent{
display:grid;
display:block;
height:auto;
grid-template-areas:
"content1" "content2";
}
.menu {grid-area: content1;}{
color: blue;
background-color: yellow;
min-height:150px;
}
.menu2 {grid-area: content2;}{
color: blue;
background-color: yellow;
min-height:150px;
}
}
@media (max-width: 480px){
.menu {
color: green;
background-color: black;
display:list-item;
width: 100%;
}
.menu2 {
color: green;
background-color: black;
display:list-item;
width: 100%;
}
}
</style>
</head>
<body>
<div class = "parent">
<div class = "menu">
<p>Objeto 1</p>
</div>
<div class = "menu">
<p>Objeto 2</p>
</div>
<div class = "menu">
<p>Objeto 3</p>
</div>
<div class = "menu2">
<p>Objeto 4</p>
</div>
<div class = "menu2">
<p>Objeto 5</p>
</div>
<div class = "menu2">
<p>Objeto 6</p>
</div>
</div>
</body>
</main>`
Профессор просит студентов использовать только медиа-запросы.
В среднем разрешении два объекта будут отображаться рядом, в двух столбцах, то есть в основном сетка 3x2 (строка x столбец).
Как уже упоминалось выше:
- Я понятия не имею, почему, но элементы перекрываются и не остаются в определенном месте, как должны. Пробовал использовать шаблон сетки, но как-то это не очень эффективно. Понятия не имею, неправильный ли синтаксис, но, возможно, я что-то упустил.
Я попробовал просто оставить их внутри div, и они также не отображаются в виде столбца, как будто код пропускает эту среднюю часть и просто показывает выстроенное в линию и вертикальное меню.
Кстати, начальная загрузка использует медиа-запросы, как и любая адаптивная структура.
Ну я не особо вникал в это Лелио. Я делал это в течение шести месяцев, а затем прекратил. Но спасибо за ваш вклад. И Алохчи прав. Я не рассматривал CSS-валидатор.
Ответы 1
Я понятия не имею, почему, но элементы перекрываются и не остаются в определенном месте, как должны.
Поскольку grid-template-areas буквально определяет области, в вашем случае вы определили только две области. Таким образом, 3 предмета пытаются поместиться в одну и ту же область, что приводит к их перекрытию. То, что вам нужно, может быть сетка-шаблон-столбцы.
Вот упрощенная версия вашего подхода с использованием сетки:
.parent {
display: grid;
}
@media (min-width:769px) {
/* large screen, flow by column */
.parent {
grid-auto-flow: column;
}
.menu {
background-color: green;
}
}
@media (min-width:481px) and (max-width: 768px) {
/* medium screen, 2 columns, 3 rows */
.parent {
grid-auto-flow: column;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.menu {
background-color: yellow;
}
}
@media (max-width: 480px) {
/* small screen, flow by row, default grid behavior, no changes needed */
.menu {
background-color: blue;
}
}<div class = "parent">
<div class = "menu">
<p>Objeto 1</p>
</div>
<div class = "menu">
<p>Objeto 2</p>
</div>
<div class = "menu">
<p>Objeto 3</p>
</div>
<div class = "menu">
<p>Objeto 4</p>
</div>
<div class = "menu">
<p>Objeto 5</p>
</div>
<div class = "menu">
<p>Objeto 6</p>
</div>
</div>Я попробую, Хао Ву! Потрясающий ответ, думаю, я понимаю, что вы имеете в виду. Большое спасибо, что прояснили ситуацию.
«Я понятия не имею, неправильный ли синтаксис». Что. по крайней мере, это то, что вы можете узнать сами. Отправьте свой CSS CSS-валидатору