説明 Web ページを作成する場合、モバイルバージョンを試すまでは、ChromeDevTools ですべてが期待どおりに動作していました。なぜこのようなことが起こるのでしょうか?そのような問題に遭遇したことはありません。再現手順これはデスクトップ版で起こることです。幅を縮小した後: これは予想通りです。モバイル版をアクティブにすると、突然機能しなくなりました。flex+flex-wrap+flex-direction を使用したり、grid+grid-template-columns:Repeat(auto-fit,minmax) を使用したりしても、

追加してみてください head タグに追加します。

モバイルデバイスではレスポンシブレイアウトカードが正しく表示されません

＃＃＃＃＃＃説明する＃＃＃

Web ページを作成するとき、モバイルバージョンを試すまでは、Chrome DevTools ですべてが期待どおりに機能していました。なぜこのようなことが起こるのでしょうか?そのような問題に遭遇したことはありません。

＃＃＃再現する手順＃＃＃

これはデスクトップ版で起こることです。

幅を縮小した後:

これは想定内のことです。モバイル版をアクティベートしたところ、突然利用できなくなりました:

flex flex-wrap flex-direction

を使用している場合でも、

grid Grid-template-columns を使用している場合でも、Repeat(auto-fit, minmax(250px, 1fr));

#。 Cards

クラスは、モバイルデバイスでも動作しません。 ＃＃＃環境＃＃＃私が使用したコードは次のとおりです:

const データ = [
  {
    コディゴ: "a1"、
    名前: 「テスト」、
    クラス:「アルノ」、
  }、
  {
    コディゴ: "a2"、
    名前: 「テスト」、
    クラス:「アルノ」、
  }、
  {
    コディゴ：「a3」、
    名前: 「テスト」、
    クラス:「アルノ」、
  }、
  {
    コディゴ：「a4」、
    名前: 「テスト」、
    クラス:「アルノ」、
  }、
  {
    コディゴ：「a5」、
    名前: 「テスト」、
    クラス:「アルノ」、
  }、
  {
    コディゴ：「a6」、
    名前: 「テスト」、
    クラス:「アルノ」、
  }、
];

const groupByKey = (リスト, キー, {省略キー = false }) =>
  list.reduce((ハッシュ, { [キー]: 値, ...残り }) => {
    const item = 省略キー ?残り : { [キー]: 値, ...残り };
    const グループ = ハッシュ[値] || [];
    return { ...ハッシュ, [値]: [...グループ, 項目] };
  }、{});

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

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

  const createCard = (人、aluno = false) => {
    const カード = document.createElement("div");
    Card.classList.add("カード");

    const CardImage = document.createElement("div");
    CardImage.classList.add("card__image");
    const 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("ターゲット", "_blank");
    CardLink.setAttribute("href", `${person.CODIGO}.html`);
    const CardButton = document.createElement("ボタン");
    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(カード);
    リーを返します。
  };

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

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


＃＃＃：根 {
  --グレー-ダーク: #444444;
  --グレー-ダーク: #696969;
  --グレー: #999999;
  --グレーライト: #cccccc;
  --gray-lighter: #ececec;
  --gray-lightest: 明るくする(--gray-lighter, 4%);
  テキスト装飾: なし。
}
* {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ設定: ボーダーボックス;
  リストスタイル: なし;
  スクロール動作: スムーズ;
}
ああ、
a：ホバー、
a：訪問しました、
a：アクティブ、
リンク {
  テキスト装飾: なし。
}
セクション {
  最小高さ: 100vh;
  幅: 100%;
}
html {
  背景色: #f0f0f0;
}体 {
  色: var(--gray);
  フォントファミリー: "Helvetica Neue"、Helvetica、Arial、サンセリフ;
  フォントスタイル: 通常;
  フォントの太さ: 400;
  パディング: 1レム;
}
h1 {
  フォントサイズ: 5rem;
  パディング: 3レム;
}
.cards {
  ディスプレイ: フレックス;
  フレックス方向: 行;
  フレックスラップ: ラップ;
  コンテンツの位置揃え: 均等なスペース;
  ギャップ: 1レム;
}
.カード .カード {
  ディスプレイ: フレックス;
  フレックス方向: 列;
  オーバーフロー: 非表示;
  背景色: #fff;
  境界半径: 0.25rem;
  最大幅: 300ピクセル;
  ボックスシャドウ: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}
.cards .card:hover .card__image {
  フィルター: コントラスト(100%);
}
.cards .card__content {
  パディング: 1レム;
}
.cards .card__content .btn {
  背景色: #fff;
  ボーダー: 1px ソリッド var(--gray-light);
  境界半径: 1rem;
  色: var(--gray-dark);
  パディング: 0.5rem;
  テキスト変換: 小文字;
  カーソル: ポインタ;
  トランジション: すべて 0.5 秒の 3 次ベジェ (0.43、0.41、0.22、0.91);
}
.cards .card__content .btn:hover {
  背景色: #c00;
  色: #fff;
}
.cards .card__content .btn--block {
  幅: 100%;
  高さ: 48px;
  フォントサイズ: 1.2rem;
}
.cards .card__image {
  フィルター: コントラスト(70%);
  オーバーフロー: 非表示;
  位置: 相対的;
  トランジション: フィルター 0.5 秒 3 次ベジェ (0.43, 0.41, 0.22, 0.91);
  高さ: 400ピクセル;
}
.cards .card__image img {
  幅: 100%;
  最大高さ: 400ピクセル;
  -o-object-fit: を含む;
  オブジェクトフィット: 含む;
}
.cards .card__title {
  色: var(--gray-dark);
  フォントサイズ: 1.7rem;
  フォントの太さ: 300;
  文字間隔: 2px;
  テキスト変換: 大文字;
}
.cards .card__text {
  フォントサイズ: 1rem;
  行の高さ: 1.5;
  マージン-ボトム: 1.25rem;
}
@media 画面と (最大幅: 600px) {
  h1 {
    フォントサイズ: 3rem;
    パディング: 1.5rem;
  }
  .カード .カード {
    マージン-ボトム: 1レム;
  }
  .cards .card__image {
    最大高さ: 200ピクセル;
  }
}
<!DOCTYPE html>
<html lang="ja">
  <頭>
    <メタ文字セット="UTF-8">
    <リンク rel="スタイルシート"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <リンク rel="スタイルシート" href="assets/style.css">
    <スクリプト遅延 src="assets/script.js"></script>

  </head>
  <本体>
    <セクション>
      <h1>アルノス</h1>
      <ul class="cards" id="alunos"></ul>
    </セクション>
  </ボディ>
</html>



 これは私自身に起こったことではないので、この場所から始まったものであることはわかりません。CSS が原因であることはわかっていますが、都会のヒント バーが原因であることはわかっています。
谢谢!

P粉878510551254日前407

モバイルデバイスではレスポンシブレイアウトカードが正しく表示されません

＃＃＃再現する手順＃＃＃

全員に返信(1)返信します

`全員に返信(1)返信します`