时间戳

首页 > 解决方案 > CSS - 试图让内容按比例缩小以适应较小的屏幕

html - CSS - 试图让内容按比例缩小以适应较小的屏幕

问题描述

Codepen 用于我的纸牌游戏项目

这是我的 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，但我仍然在为最后一块苦苦挣扎。有什么建议么？

标签： htmlcss

解决方案

这是一支我从你那里分出的钢笔。

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

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

引导程序“行”中的列示例：

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

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

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

推荐阅读