Auf Mobilgeräten werden responsive Layoutkarten nicht korrekt angezeigt

Question

Beschreibung

Beim Erstellen von Webseiten funktionierte mit Chrome DevTools alles wie erwartet, bis ich die mobile Version ausprobierte. Warum passiert das? Ich bin noch nie auf ein solches Problem gestoßen.

Schritte zur Reproduktion

Das passiert mit der Desktop-Version.

Nach dem Reduzieren der Breite:

Das wird erwartet. Als ich die mobile Version aktivierte, war sie plötzlich nicht mehr verfügbar:

Selbst mit der flex + flex-wrap + flex-direction 或使用 grid + grid-template-columns: Repeat(auto-fit, minmax(250px, 1fr)); 的 .cards-Klasse funktioniert es auf Mobilgeräten nicht.

Umwelt

Der Code, den ich verwendet habe, ist wie folgt:

const data = [
  {
    CODIGO: "a1",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a2",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a3",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a4",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a5",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a6",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
];

const groupByKey = (list, key, { omitKey = false }) =>
  list.reduce((hash, { [key]: value, ...rest }) => {
    const item = omitKey ? rest : { [key]: value, ...rest };
    const group = hash[value] || [];
    return { ...hash, [value]: [...group, item] };
  }, {});

const result = groupByKey(data, "CLASSE", { omitKey: true });
const ALUNO = result.ALUNO;
const PROFESSOR = result.PROFESSOR;
const MIDIA = result.MIDIA;
const PASTOR = result.PASTOR;

document.addEventListener("DOMContentLoaded", function () {
  const listElements = {
    alunoList: document.getElementById("alunos"),
    professorList: document.getElementById("professores"),
    midiaList: document.getElementById("midia"),
    pastorList: document.getElementById("pastores"),
  };

  const createCard = (person, aluno = false) => {
    const card = document.createElement("div");
    card.classList.add("card");

    const cardImage = document.createElement("div");
    cardImage.classList.add("card__image");
    const image = new Image();
    image.src = `assets/img/${person.CODIGO}i.webp`;
    cardImage.appendChild(image);

    const cardContent = document.createElement("div");
    cardContent.classList.add("card__content");
    const cardTitle = document.createElement("div");
    cardTitle.classList.add("card__title");
    cardTitle.innerHTML = person.NOME;
    const cardText = document.createElement("p");
    cardText.classList.add("card__text");
    const cardLink = document.createElement("a");
    cardLink.setAttribute("target", "_blank");
    cardLink.setAttribute("href", `${person.CODIGO}.html`);
    const cardButton = document.createElement("button");
    cardButton.classList.add("btn");
    cardButton.classList.add("btn--block");
    cardButton.innerHTML = "Mais detalhes ➜";
    cardLink.appendChild(cardButton);
    cardContent.appendChild(cardTitle);
    cardContent.appendChild(cardText);
    cardContent.appendChild(cardLink);

    card.appendChild(cardImage);
    card.appendChild(cardContent);

    const li = document.createElement("li");
    li.classList.add("cards__item");
    li.appendChild(card);
    return li;
  };

  const addCardsToList = (personList, person, aluno = false) => {
    listElements[personList].appendChild(createCard(person, aluno));
  };

  ALUNO.forEach((person) =>
    addCardsToList("alunoList", person, (aluno = true))
  );
});

:root {
  --gray-darker: #444444;
  --gray-dark: #696969;
  --gray: #999999;
  --gray-light: #cccccc;
  --gray-lighter: #ececec;
  --gray-lightest: lighten(--gray-lighter, 4%);
  text-decoration: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  scroll-behavior: smooth;
}
a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
}
section {
  min-height: 100vh;
  width: 100%;
}
html {
  background-color: #f0f0f0;
}
body {
  color: var(--gray);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1rem;
}
h1 {
  font-size: 5rem;
  padding: 3rem;
}
.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
}
.cards .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0.25rem;
  max-width: 300px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}
.cards .card:hover .card__image {
  filter: contrast(100%);
}
.cards .card__content {
  padding: 1rem;
}
.cards .card__content .btn {
  background-color: #fff;
  border: 1px solid var(--gray-light);
  border-radius: 1rem;
  color: var(--gray-dark);
  padding: 0.5rem;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.cards .card__content .btn:hover {
  background-color: #c00;
  color: #fff;
}
.cards .card__content .btn--block {
  width: 100%;
  height: 48px;
  font-size: 1.2rem;
}
.cards .card__image {
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  height: 400px;
}
.cards .card__image img {
  width: 100%;
  max-height: 400px;
  -o-object-fit: contain;
  object-fit: contain;
}
.cards .card__title {
  color: var(--gray-dark);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cards .card__text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
  .cards .card {
    margin-bottom: 1rem;
  }
  .cards .card__image {
    max-height: 200px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="assets/style.css">
    <script defer src="assets/script.js"></script>

  </head>
  <body>
    <section>
      <h1>Alunos</h1>
      <ul class="cards" id="alunos"></ul>
    </section>
  </body>
</html>

Da mir das noch nie passiert ist, weiß ich gar nicht, wo ich anfangen soll. Ich weiß, dass das an CSS liegt, aber jeder Tipp wäre großartig.

Danke!

Answer 1

尝试添加

进入你的 head 标签。