Question

这是我的CSS，自从这么久以来，其余代码就在Codepen中。

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;


function flipCard() {
	if (lockBoard) return;
	if (this === firstCard) return;

	this.classList.add('flip');


if (!hasFlippedCard) {
	hasFlippedCard = true;
	firstCard = this;

	return;
}

secondCard = this;
checkForMatch();
}

function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

    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() {
	[hasFlippedCard, lockBoard] = [false, false];
	[firstCard, secondCard] = [null, null];
}

(function shuffle() {
	cards.forEach(card => {
		let randomPos = Math.floor(Math.random() * 12);
		card.style.order = randomPos;
	});
})();


cards.forEach(card => card.addEventListener('click', flipCard));

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: black;
}

h1 {
	text-align: center;
	color: white;
	font-family: "Courgette";
	font-size: 95px;
	padding-top: 35px;
	padding-bottom: 50px;
}

.memory-game {
  width: 840px;
  height: 840px;
  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;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.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: 5px;
  background: #1C7CCC;
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<h1>Match The Leos</h1>

<section class="memory-game">
  
	<div class="memory-card" data-framework="meow1">
<img class="front-face" src="https://image.ibb.co/hQQx7f/leo1.jpg" alt="leo1" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>
  
  <div class="memory-card" data-framework="meow1">
<img class="front-face" src="https://image.ibb.co/hQQx7f/leo1.jpg" alt="leo1" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>
  
  <div class="memory-card" data-framework="meow2">
		<img class="front-face" src="https://image.ibb.co/fOjqSf/leo2.jpg" alt="leo2" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>

	<div class="memory-card" data-framework="meow2">
		<img class="front-face" src="https://image.ibb.co/fOjqSf/leo2.jpg" alt="leo2" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>
  
  <div class="memory-card" data-framework="meow3">
		<img class="front-face" src="https://image.ibb.co/ezcYf0/leo3.jpg" alt="leo3" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>

	<div class="memory-card" data-framework="meow3">
		<img class="front-face" src="https://image.ibb.co/ezcYf0/leo3.jpg" alt="leo3" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>
  
  <div class="memory-card" data-framework="meow3">
		<img class="front-face" src="https://image.ibb.co/mBVm00/leo4.jpg" alt="leo4" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>

	<div class="memory-card" data-framework="meow3">
		<img class="front-face" src="https://image.ibb.co/mBVm00/leo4.jpg" alt="leo4" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>
  
  <div class="memory-card" data-framework="meow5">
		<img class="front-face" src="https://image.ibb.co/hFcoDL/leo5.jpg" alt="leo5" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>

	<div class="memory-card" data-framework="meow5">
		<img class="front-face" src="https://image.ibb.co/hFcoDL/leo5.jpg" alt="leo5" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>

	<div class="memory-card" data-framework="meow6">
		<img class="front-face" src="https://image.ibb.co/d9FatL/leo6.jpg" alt="leo6" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>

	<div class="memory-card" data-framework="meow6">
		<img class="front-face" src="https://image.ibb.co/d9FatL/leo6.jpg" alt="leo6" border="0">
		<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
	</div>
</section>
</div>

我正在制作纸牌配对游戏，几乎拥有所需的一切，但是我为此苦苦挣扎一些CSS。

我试图弄清楚如何随着屏幕/浏览器的变小来缩小游戏的部分。整个下午，我一直在弄乱CSS，但我仍在为最后一块而苦苦挣扎。有什么建议吗？

Answer 1

这里是Pen，我是从您的分支机构来的。

我引入了一个广泛使用的名为Bootstrap的响应框架，以帮助您将卡片分成网格布局，以适应用户的视口。此外，我还使用media queries编写了一些自定义规则。使用媒体查询，您可以编写特定于给定视口宽度（或高度）的样式。

希望这足以让您考虑使用响应式框架如何帮助为各种屏幕尺寸设置内容样式。

引导“行”中的列示例：

<div class="col-6 col-md-3">

具有768像素或更宽屏幕规则的媒体查询示例：

@media (min-width: 768px) {
 .your-rule-here {
 }
}

CSS-尝试使内容缩小以适应较小的屏幕

1 个答案: