Блог

Я создал игру «Камень, ножницы, бумага» как часть учебной программы TOP.

Я хочу отобразить оценку человека и оценку компьютера в виде двух ГИГАНТСКИХ цифр, показанных позади всех других элементов. Предпочтительно, чтобы каждая цифра занимала 50% ширины экрана.

Хоть убей, я не могу заставить это сработать. Пока мой код выглядит так:

https://codepen.io/givemeskills/pen/GRjMYPN

 #testContainer {
  max-height: 100%;
  z-index: -1;
  display: flex;
  justify-content: center;
  position: relative;
  top: 400px;
  border-color: blue;
  border-style: solid;
}

#test {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-color: red;
  border-style: solid;
  font-size: x;
  margin: 10px;
  font-size: 100px;
  overflow: hidden;
} 

 <div id="testContainer">
  <div id="test">
    <p id="humanScoreDispTest">3</p>
    <p id="compScoreDispTest">3</p>
  </div>
</div> 

Как вы можете видеть, я добавил границы в тщетной попытке понять, что я делаю. В идеале я бы хотел, чтобы размер шрифта был как можно больше, но, похоже, это просто влияет на размер самой страницы.

Я прошу прощения, если этот вопрос не очень хорошо сформулирован. Я очень новичок во всем этом.

Вы должны использовать свойство font-size . Вы написали только x, который не является допустимым значением (также вернул его в средство проверки CSS). Вы должны написать что-то вроде 4rem или в другой единице, например 400%.

Если вы хотите настроить высоту шрифта (= font-size) так, чтобы шрифт занимал 50% ширины, это не так просто. Разные шрифты имеют разное соотношение ширины и высоты, также в зависимости от буквы. Для этого вам понадобится JavaScript, чистого CSS недостаточно. Но я думаю, что это не может быть вашей целью, вот пример, показывающий, почему: если у компьютера результат 100, а у человека результат 5, 5 будет намного больше, чем 100.