英文:
Responsive layout cards are not working on mobile
问题
描述
在创建网页时,一切都在Chrome DevTools上按预期工作,直到我尝试了移动版本。为什么会发生这种情况?以前从未遇到过这种问题。
复现步骤
这是桌面版本的样子。
[![桌面版布局][1]][1]
缩小宽度后:
[![缩小宽度后][2]][2]
这是预期的。问题是当我激活移动版本时,它突然不起作用:
[![激活iPhone SE可视化后][3]][3]
即使使用.cards
类使用flex + flex-wrap + flex-direction
或使用grid + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
也不适用于移动设备。
环境
我使用的代码如下:
<!-- 开始代码段:js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-js -->
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 = "更多详情 ➜";
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))
);
});
<!-- 语言: lang-css -->
: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
<details>
<summary>英文:</summary>
Description
==============
Whilst creating a webpage, everything was working on Chrome DevTools as expected, until I tried the mobile version. Why is that happening? Never faced such issue.
Steps to Reproduce
==============
This is how it is on the desktop version.
[![layout for desktop][1]][1]
After reducing the width:
[![after reducing the width][2]][2]
Which is expected. It's when I activate the mobile version that it's suddenly not working:
[![after activating the iPhone SE visualization][3]][3]
Even with the `.cards` class using `flex + flex-wrap + flex-direction` or using `grid + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` it does not work for mobile.
Environment
==============
The code I am using is as follows:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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))
);
});
<!-- language: lang-css -->
: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;
}
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
As this never happened to me, I don't even know where to begin. I know that it's happening due to the css, but any tips would be awesome.
Thanks!
[1]: https://i.stack.imgur.com/OwXcW.png
[2]: https://i.stack.imgur.com/Rs3ZI.png
[3]: https://i.stack.imgur.com/bK5Dx.png
</details>
# 答案1
**得分**: 1
```将以下内容添加到您的<head>标签中:<meta name="viewport" content="width=device-width, initial-scale=1">```
<details>
<summary>英文:</summary>
Try Adding
```<meta name="viewport" content="width=device-width, initial-scale=1">```
into your head tag.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论