Peranti mudah alih tidak memaparkan kad reka letak responsif dengan betul

Question

Penerangan

Apabila membuat halaman web, semuanya berfungsi seperti yang diharapkan pada Chrome DevTools, sehingga saya mencuba versi mudah alih. Mengapa ini berlaku? Tidak pernah menghadapi masalah seperti itu.

Langkah untuk membiak

Inilah yang berlaku dengan versi desktop.

Selepas mengurangkan lebar:

Ini dijangka. Apabila saya mengaktifkan versi mudah alih, ia tiba-tiba menjadi tidak tersedia:

Walaupun menggunakan flex + flex-wrap + flex-direction 或使用 grid + grid-template-columns: Repeat(auto-fit, minmax(250px, 1fr)); 的 .cards kelas, ia tidak berfungsi pada peranti mudah alih.

Persekitaran

Kod yang saya gunakan adalah seperti berikut:

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>

Memandangkan ini tidak pernah berlaku kepada saya, saya tidak tahu dari mana hendak bermula. Saya tahu ini disebabkan oleh CSS, tetapi sebarang petua adalah bagus.

Terima kasih!

Answer 1

Cuba tambah

ke dalam tag kepala anda.