在建立網頁時，Chrome DevTools 上的一切都按預期運行，直到我嘗試了行動版本。為什麼會發生這種情況？從來沒有遇到這樣的問題。
這就是桌面版的情況。
縮小寬度後：
這是預料之中的。當我啟動行動版時，它突然無法使用：
即使使用flex flex-wrap flex-direction 或使用grid grid-template-columns: Repeat(auto-fit, minmax(250px, 1fr)); 的.cards 類，它也不起作用行動裝置。
我使用的程式碼如下：
常數資料 = [
{
科迪戈：“a1”，
名稱：“測試”，
類別：“阿魯諾”，
},
{
科迪戈：“a2”，
名稱：“測試”，
類別：“阿魯諾”，
},
{
科迪戈：“a3”，
名稱：“測試”，
類別：“阿魯諾”，
},
{
科迪戈：“a4”，
名稱：“測試”，
類別：“阿魯諾”，
},
{
科迪戈：“a5”，
名稱：“測試”，
類別：“阿魯諾”，
},
{
科迪戈：“a6”，
名稱：“測試”，
類別：“阿魯諾”，
},
];
const groupByKey = (列表, key, { omitKey = false }) =>;
list.reduce((hash, { [key]: value, ...rest }) => {
常數項=omitKey？休息：{[鍵]：值，...休息}；
const 組 = 散列[值] || []；
return { ...散列，[值]：[...組，項目] };
}, {});
const 結果 = groupByKey(data, "CLASSE", { omitKey: true });
const ALUNO = 結果.ALUNO;
const PROFESSOR = 結果.PROFESSOR;
const MIDIA = 結果.MIDIA;
const PASTOR = 結果.PASTOR;
document.addEventListener("DOMContentLoaded", function () {
常量列表元素 = {
alunoList: document.getElementById("alunos"),
ProfessorList: document.getElementById("教授"),
midiaList: document.getElementById("midia"),
牧師名單： document.getElementById("pastores"),
};
const createCard = (person, aluno = false) =>; {
const 卡 = document.createElement("div");
卡.classList.add("卡");
const cardImage = document.createElement("div");
cardImage.classList.add("card__image");
常量影像=新影像（）；
image.src = `assets/img/${person.CODIGO}i.webp`;
cardImage.appendChild(映像);
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 = "詳細資料 ➜";
cardLink.appendChild(cardButton);
cardContent.appendChild(cardTitle);
cardContent.appendChild(cardText);
cardContent.appendChild(cardLink);
卡.appendChild(cardImage);
卡.appendChild(cardContent);
const li = document.createElement("li");
li.classList.add("cards__item");
li.appendChild(卡);
返回李；
};
const addCardsToList = (personList, person, aluno = false) =>; {
listElements[personList].appendChild(createCard(person, aluno));
};
ALUNO.forEach((人) =>
addCardsToList("alunoList", person, (aluno = true))
）；
});
＃＃＃：根 {
--灰色-深色：#444444；
--灰暗：#696969；
--灰色：#999999；
--灰光：#cccccc；
--灰色打火機：#ececec；
--gray-lightest: 變亮(--gray-lighter, 4%);
文字裝飾：無；
}
* {
保證金：0；
填充：0；
框大小：邊框框；
列表樣式：無；
滾動行為：平滑；
}
A，
一個：懸停，
答：訪問過，
一個：活躍，
一條連結 {
文字裝飾：無；
}
部分 {
最小高度：100vh；
寬度：100%；
}
html{
背景顏色：#f0f0f0；
}身體 {
顏色：var(--灰色)；
字型系列：「Helvetica Neue」、Helvetica、Arial、sans-serif；
字體樣式：正常；
字體粗細：400；
填充：1rem；
}
h1 {
字體大小：5rem；
填充：3rem；
}
.cards {
顯示：柔性；
彎曲方向：行；
彈性包裹：包裹；
justify-content：空間均勻；
間隙：1rem；
}
.cards .card {
顯示：柔性；
彈性方向：列；
溢出：隱藏；
背景顏色：#fff；
邊界半徑：0.25rem；
最大寬度：300px；
框陰影: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}
.cards .card:hover .card__image {
濾鏡：對比（100%）；
}
.cards .card__content {
填充：1rem；
}
.cards .card__content .btn {
背景顏色：#fff；
邊框：1px 實心 var(--gray-light);
邊界半徑：1rem；
顏色：var(--灰色-深色)；
填充：0.5rem；
文字轉換：小寫；
遊標：指針；
過渡：全部 0.5s 三次貝塞爾曲線(0.43, 0.41, 0.22, 0.91)；
}
.cards .card__content .btn:懸停{
背景顏色：#c00；
顏色：#fff；
}
.cards .card__content .btn--塊 {
寬度：100%；
高度：48像素；
字體大小：1.2rem；
}
.cards .card__image {
濾鏡：對比（70%）；
溢出：隱藏；
位置：相對；
過渡：過濾0.5s三次貝塞爾曲線(0.43, 0.41, 0.22, 0.91)；
高度：400像素；
}
.cards .card__image img {
寬度：100%；
最大高度：400px；
-o-object-fit：內含；
物件適合：包含；
}
.cards .card__title {
顏色：var(--灰色-深色)；
字體大小：1.7rem；
字體粗細：300；
字母間距：2px；
文字轉換：大寫；
}
.cards .card__text {
字體大小：1rem；
行高：1.5；
下邊距：1.25rem；
}
@media 螢幕和（最大寬度：600px）{
h1 {
字體大小：3rem；
填充：1.5rem；
}
.cards .card {
下邊距：1rem；
}
.cards .card__image {
最大高度：200px；
}
}
<！DOCTYPE html>
<html lang="zh-cn">
<頭>
<元字元集=“UTF-8”>
;
<部分>
<h1>Alunos</h1>
<ul class="cards" id="alunos"></ul>
</節>
</正文>