响应式布局卡在移动设备上无法正常工作。

huangapple
go评论65阅读模式
英文:

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&#39;s when I activate the mobile version that it&#39;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:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

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

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

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

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

      const createCard = (person, aluno = false) =&gt; {
        const card = document.createElement(&quot;div&quot;);
        card.classList.add(&quot;card&quot;);

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

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

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

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

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

      ALUNO.forEach((person) =&gt;
        addCardsToList(&quot;alunoList&quot;, person, (aluno = true))
      );
    });


&lt;!-- language: lang-css --&gt;

    :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: &quot;Helvetica Neue&quot;, 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;
      }
    }

&lt;!-- language: lang-html --&gt;

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

      &lt;/head&gt;
      &lt;body&gt;
        &lt;section&gt;
          &lt;h1&gt;Alunos&lt;/h1&gt;
          &lt;ul class=&quot;cards&quot; id=&quot;alunos&quot;&gt;&lt;/ul&gt;
        &lt;/section&gt;
      &lt;/body&gt;
    &lt;/html&gt;


&lt;!-- end snippet --&gt;

As this never happened to me, I don&#39;t even know where to begin. I know that it&#39;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>标签中：&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;```

<details>
<summary>英文:</summary>

Try Adding 

```&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;``` 
into your head tag.

</details>

huangapple
  • 本文由 发表于 2023年2月9日 01:36:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/75389693.html
  • css
  • flexbox
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定