网格布局

Question

我已经尝试了多种方法来使游戏具有响应性，但没有一个起作用。我想在根据屏幕尺寸重新缩放图片时，保持容器memory-game的尺寸不变。

在此处查看示例。

我该如何做到？

我已尝试设置viewport，但没有成功！

const cards = document.querySelectorAll('.memory-card');

let flippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

(function shuffle(){
  cards.forEach(card => {
    let random = Math.floor(Math.random() * 31);
    card.style.order = random;
  } )
})()

function flipCard() {
  if(lockBoard) return;
  if (this === firstCard) return;

  this.classList.add('flip');

  if (!flippedCard) {
    flippedCard = true;
    firstCard = this;

    return;
  } 
    secondCard = this;
    checkForMatch();
   
  }

function checkForMatch(){
  let isMatch = firstCard.dataset.namecard === secondCard.dataset.namecard
  isMatch ? disableCards() : unflipCards();

}

function disableCards(){
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);
  resetBoard();
}

function unflipCards(){
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');
    resetBoard();
    }, 1500);
}

function resetBoard(){
  [flippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

cards.forEach(card => card.addEventListener('click', flipCard));

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    height: 100vh;
    display: flex;
  }
  
  .memory-game {
    width: 640px;
    height: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    perspective: 1000px;
  }
  
  .memory-card {
    width: calc(25% - 10px);
    height: calc(33.333% - 10px);
    margin: 5px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
  }
  
  .memory-card:active {
    transform: scale(0.97);
    transition: transform .2s;
  }
  
  .memory-card.flip {
    transform: rotateY(180deg);
  }
  
  .front-face,
  .back-face {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    border-radius: 2px;
    background: black;
    backface-visibility: hidden;
  }
  
  .front-face {
    transform: rotateY(180deg);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Memory game</title>
</head>
<body>
    <section  class="memory-game">
        <div class="memory-card" data-namecard="Akashi-Kaikyo-Bridge-Japan"> 
            <img class="front-face" src="https://i.pinimg.com/originals/bb/c5/22/bbc522a0aadb5910578d090f34d48956.jpg" alt="Akashi-Kaikyo-Bridge-Japan">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Akashi-Kaikyo-Bridge-Japan">
            <img class="front-face" src="https://i.pinimg.com/originals/bb/c5/22/bbc522a0aadb5910578d090f34d48956.jpg" alt="Akashi-Kaikyo-Bridge-Japan">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Bridge-of-Sighs-Venice-Italy">
            <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Bridge-of-Sighs-Venice-Italy">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Bridge-of-Sighs-Venice-Italy">
            <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Bridge-of-Sighs-Venice-Italy">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Brooklyn-Bridge-New-York">
            <img class="front-face" src="https://i.pinimg.com/originals/79/1e/74/791e747b7ed469142a1f07256f17e366.jpg" alt="Brooklyn-Bridge-New-York">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Brooklyn-Bridge-New-York"> 
            <img class="front-face" src="https://i.pinimg.com/originals/79/1e/74/791e747b7ed469142a1f07256f17e366.jpg" alt="Brooklyn-Bridge-New-York">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        
        <div class="memory-card" data-namecard="Chapel-Bridge-Switzerland">
            <img class="front-face" src="https://i.pinimg.com/originals/ec/fb/9e/ecfb9ee4ee30d0dcffb221bafec5faca.jpg" alt="Chapel-Bridge-Switzerland">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card"data-namecard="Chapel-Bridge-Switzerland">
            <img class="front-face" src="https://i.pinimg.com/originals/ec/fb/9e/ecfb9ee4ee30d0dcffb221bafec5faca.jpg" alt="Chapel-Bridge-Switzerland">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Chenyang-Bridge-China">
            <img class="front-face" src="https://i.pinimg.com/originals/9c/d9/16/9cd9167284afe5dea8a5b5cf5576c30f.jpg" alt="Chenyang-Bridge-China">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card"  data-namecard="Chenyang-Bridge-China">
            <img class="front-face" src="https://i.pinimg.com/originals/9c/d9/16/9cd9167284afe5dea8a5b5cf5576c30f.jpg" alt="Chenyang-Bridge-China">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>

       <div class="memory-card" data-namecard="Gateshead-Millenium-Bridge-England">
            <img class="front-face" src="https://i.pinimg.com/originals/f2/f1/2d/f2f12dab27a0ddcf1636772330ae43c5.jpg" alt="Gateshead-Millenium-Bridge-England">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Gateshead-Millenium-Bridge-England">
            <img class="front-face" src="https://i.pinimg.com/originals/f2/f1/2d/f2f12dab27a0ddcf1636772330ae43c5.jpg" alt="Gateshead-Millenium-Bridge-England">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="George-Washington-Bridge-New-York">
            <img class="front-face" src="https://i.pinimg.com/originals/c3/d8/ef/c3d8efd8a617aa8a5ca6fbd54ffe4da3.jpg" alt="George-Washington-Bridge-New-York">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="George-Washington-Bridge-New-York">
            <img class="front-face" src="https://i.pinimg.com/originals/c3/d8/ef/c3d8efd8a617aa8a5ca6fbd54ffe4da3.jpg" alt="George-Washington-Bridge-New-York">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
                <div class="memory-card" data-namecard="Hussaini-Hanging-Bridge-Pakistan">
            <img class="front-face" src="https://i.pinimg.com/originals/cc/8d/8c/cc8d8ca23d1123c52a73861c1bef20e5.jpg" alt="Hussaini-Hanging-Bridge-Pakistan">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Hussaini-Hanging-Bridge-Pakistan">
            <img class="front-face" src="https://i.pinimg.com/originals/cc/8d/8c/cc8d8ca23d1123c52a73861c1bef20e5.jpg" alt="Hussaini-Hanging-Bridge-Pakistan">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Kintai-Bridge-Japan">
            <img class="front-face" src="https://i.pinimg.com/originals/23/1c/71/231c717c88464095512255fd65f04bf9.jpg" alt="Kintai-Bridge-Japan">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Kintai-Bridge-Japan">
            <img class="front-face" src="https://i.pinimg.com/originals/23/1c/71/231c717c88464095512255fd65f04bf9.jpg" alt="Kintai-Bridge-Japan">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Langkawi-Sky-Bridge-Malaysia">
            <img class="front-face" src="https://i.pinimg.com/originals/f7/90/f8/f790f86418273a3ff6cc79c9f0e018f7.jpg" alt="Langkawi-Sky-Bridge-Malaysia">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Langkawi-Sky-Bridge-Malaysia">
            <img class="front-face" src="https://i.pinimg.com/originals/f7/90/f8/f790f86418273a3ff6cc79c9f0e018f7.jpg" alt="Langkawi-Sky-Bridge-Malaysia">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Millenium-Bridge-London">
            <img class="front-face" src="https://i.pinimg.com/originals/56/57/bc/5657bc604d0d0336c032cf596fb10fa1.jpg" alt="Millenium-Bridge-London">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Millenium-Bridge-London">
            <img class="front-face" src="https://i.pinimg.com/originals/56/57/bc/5657bc604d0d0336c032cf596fb10fa1.jpg" alt="Millenium-Bridge-London">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Octavio-Frias-de-Oliveira-Bridge-Brazil">
            <img class="front-face" src="https://i.pinimg.com/originals/f7/29/6b/f7296b01f446c3e89d22d228b9ad90cd.jpg" alt="Octavio-Frias-de-Oliveira-Bridge-Brazil">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Octavio-Frias-de-Oliveira-Bridge-Brazil">
            <img class="front-face" src="https://i.pinimg.com/originals/f7/29/6b/f7296b01f446c3e89d22d228b9ad90cd.jpg" alt="Octavio-Frias-de-Oliveira-Bridge-Brazil">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Oresund-Bridge-Sweden">
            <img class="front-face" src="https://i.pinimg.com/originals/3c/6a/6d/3c6a6d49a66b51b09eda41174c0d6c12.jpg" alt="Oresund-Bridge-Sweden">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Oresund-Bridge-Sweden">
            <img class="front-face" src="https://i.pinimg.com/originals/3c/6a/6d/3c6a6d49a66b51b09eda41174c0d6c12.jpg" alt="Oresund-Bridge-Sweden">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Pont-Gustave-Flaubert-France">
            <img class="front-face" src="https://i.pinimg.com/originals/e3/08/a6/e308a61540c27b5db7af700cc5ab0929.jpg" alt="Pont-Gustave-Flaubert-France">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Pont-Gustave-Flaubert-France">
            <img class="front-face" src="https://i.pinimg.com/originals/e3/08/a6/e308a61540c27b5db7af700cc5ab0929.jpg" alt="Pont-Gustave-Flaubert-France">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Pont-du-Gard-France">
            <img class="front-face" src="https://i.pinimg.com/originals/48/ee/ca/48eecac3f84b3f6dbdcbecbe8b9f094c.jpg" alt="Pont-du-Gard-France">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Pont-du-Gard-France">
            <img class="front-face" src="https://i.pinimg.com/originals/48/ee/ca/48eecac3f84b3f6dbdcbecbe8b9f094c.jpg" alt="Pont-du-Gard-France">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Rialto-Bridge-Venice">
            <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Rialto-Bridge-Venice">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card"  data-namecard="Rialto-Bridge-Venice">
            <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Rialto-Bridge-Venice">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Roebling-Suspension-Bridge-Ohio">
            <img class="front-face" src="https://i.pinimg.com/originals/49/a7/dd/49a7dd027a3a4a8d20e99c7501af7dbc.jpg" alt="Roebling-Suspension-Bridge-Ohio">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Roebling-Suspension-Bridge-Ohio">
            <img class="front-face" src="https://i.pinimg.com/originals/49/a7/dd/49a7dd027a3a4a8d20e99c7501af7dbc.jpg" alt="Roebling-Suspension-Bridge-Ohio">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Tower-Bridge-London">
            <img class="front-face" src="https://i.pinimg.com/originals/39/df/2c/39df2c672af164b153762122460170b7.jpg" alt="Tower-Bridge-London">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
        <div class="memory-card" data-namecard="Tower-Bridge-London">
            <img class="front-face" src="https://i.pinimg.com/originals/39/df/2c/39df2c672af164b153762122460170b7.jpg" alt="Tower-Bridge-London">
            <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
        </div>
    

    
    </section>
    

    <script src="index.js"></script>
</body>
</html>

Answer 1

service: MyImageLibrary

provider:
  name: aws
  runtime: python3.6
  stage: dev
  region: us-west-2

package:
  individually: true

functions:
    handler: index.lambda_handler

resources:
  Resources:

ImageUploadedTopic:
  Type: AWS::SNS::Topic
  Properties:
    TopicName: SNSTopicImageUploadedTopic

ImageUploadedTopicSubscription:
  Type: AWS::SNS::Subscription
  Properties:
    Endpoint:
      Fn::GetAtt: [ TestLambdaFunction , "Arn" ]
    Protocol: lambda
    TopicArn:
      arn:aws:sns:us-west-2:xxxxxxxxxxx:SNSTopicImageUploadedTopic

ImageUploadedTopicPolicy:
  Type: AWS::SNS::TopicPolicy
  Properties:
    PolicyDocument:
      Version: '2012-10-17'
      Statement:
      - Sid: AllowBucketToPushNotificationEffect
        Effect: Allow
        Principal:
          Service: s3.amazonaws.com
        Action: sns:Publish
        Resource: "*"
    Topics:
      - arn:aws:sns:us-west-2:xxxxxxxxxxx:SNSTopicImageUploadedTopic

MyImagesBucket:
  Type: AWS::S3::Bucket
  DependsOn: ImageUploadedTopicPolicy
  Properties:
    BucketName: ${self:custom.bucketName}
    NotificationConfiguration:
      TopicConfigurations:
        - Event: s3:ObjectCreated:*
          Topic: 
            arn:aws:sns:us-west-2:xxxxxxxxxxxx:SNSTopicImageUploadedTopic
    CorsConfiguration:
      CorsRules:
      - AllowedMethods:
        - GET
        - PUT
        - POST
        - HEAD
        AllowedOrigins:
        - "*"
        AllowedHeaders:
        - "*"

const cards = document.querySelectorAll('.memory-card');

let flippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

(function shuffle() {
  cards.forEach(card => {
    let random = Math.floor(Math.random() * 31);
    card.style.order = random;
  })
})()

function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  this.classList.add('flip');

  if (!flippedCard) {
    flippedCard = true;
    firstCard = this;

    return;
  }
  secondCard = this;
  checkForMatch();

}

function checkForMatch() {
  let isMatch = firstCard.dataset.namecard === secondCard.dataset.namecard
  isMatch ? disableCards() : unflipCards();

}

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);
  resetBoard();
}

function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');
    resetBoard();
  }, 1500);
}

function resetBoard() {
  [flippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

cards.forEach(card => card.addEventListener('click', flipCard));

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
}

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 2px;
  background: black;
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

.memory-game {
  max-width: 100vw;
  justify-content: center;
}

.memory-card {
  min-width: 149px;
}

Answer 2

网格布局

使用css-grid创建响应式卡片布局。
在网格的列和行上设置百分比（有百分比差距）
将所有可能的尺寸设置为可响应。

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 23%);
  grid-gap: 2%;
  grid-auto-rows: repeat(5, 18%);
}

.card {
  width: 100%;
  height: 400px;
  background-color: #222;
  box-shadow: inset 0px 0px 0px 5px gray;
}

<div class="container">
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
</div>

Answer 3

设置宽度百分比：

.memory-game {
   max-width: 640px;
   width: 100%;
   height: 100%;
}

图像存储卡游戏无响应

3 个答案:

网格布局