0
180
ViewsEl texto creado por innerHTML no se reduce en respuesta
Los elementos creados por innerHTML no se reducen con otros elementos dentro del contenedor flexible.
Mi objetivo es hacer que se encoja junto con .titleBar.
.nums parece exceder su contenedor #display aunque flex-wrap: wrap; y base flexible: 0; Está establecido.
score.innerHTML = `${p1score.toString().padStart(2, "0")} - ${p2score.toString().padStart(2, "0")}`; stopWatch.innerHTML = hr.toString().padStart(2, "0") + ":" + min.toString().padStart(2, "0") + ":" + sec.toString().padStart(2, "0"); #display { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-evenly; justify-self: center; padding: 0px; flex-basis: 0; flex-shrink: 10; } .titlebar { font-size: 5vh; font-weight: 550; margin: auto; } .nums { font-size: 8vw; font-family: Oswald; margin-top: auto; } #score { margin: auto; } <section id="display"> <p class="titlebar" id="topTitle"> ROUND TIME</p> <p id="time" class="nums">00:00:00</p> <button id="start" class="ctrlBtn">START</button> <p id="scoreLabel" class="titlebar"> PLAYER SCORES </p> <p id="score" class="nums"> 00 - 00</p> </section> Estirado:
encogido:
1 answers
Answer question0
No use flex-basis , flex-grow o flex-shrink en el contenedor flexible ( .display ) ya que están asignados a los descendientes directos del contenedor flexible (elementos secundarios). Además, se recomienda que utilice la propiedad abreviada flex en su lugar. Personalmente, evito esas propiedades porque uso otros medios para ganar capacidad de respuesta.
El font-size predeterminado se establece en <html> , lo que significa que cualquier texto que no tenga un font-size explícito o heredado tendrá el font-size predeterminado.
Intente configurar font-size predeterminado en unidades vmax . Las unidades vmax se alternan entre las unidades vh y vw ; cuál de las dos es en un momento dado depende de qué longitud de la ventana gráfica sea más grande. Si la ventana gráfica es más ancha (probablemente en computadoras de escritorio, portátiles, etc.), entonces vmax es vw y si la ventana gráfica es más alta (modo vertical móvil), entonces vmax es vh . Entonces, si hay algún cambio en la ventana gráfica, el font-size predeterminado cambia. Aunque el font-size predeterminado se reducirá y aumentará parte del texto, hay elementos que establecen un font-size predeterminado propio (como h1-h6 ), por lo que podría tener texto más grande en un <p> que en un <h4> .
Para evitar una escala desequilibrada, use rem para todo, excepto para longitudes pequeñas como el ancho del borde. Las unidades rem son directamente proporcionales al font-size predeterminado. Entonces, si tienes...
figura yo
html { font: 3vmax/1.5 Oswald } ...cada rem equivaldría a 3vh o 3vw . Vea si esta técnica facilita la capacidad de respuesta revisando el ejemplo a continuación. Revise en modo de página completa, no en la ventana de iframe y use las herramientas de desarrollo para reducirlo (vea la Figura II )
Figura II
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Raleway:wght@500&display=swap'); html { font: 3vmax/1.5 Oswald } .display * { display: block; } .display { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-evenly; justify-self: center; padding: 0px; } .titlebar { margin: auto; font: 500 3rem/1.5 Raleway; text-align: center; } .number { font-size: 4rem; font-family: Consolas; text-align: center; } button { margin: 1.5rem 0 2rem; font: inherit; font-size: 3rem; cursor: pointer; } <section class="display"> <h1 class="titlebar">ROUND TIME</h1> <time class="time number">00:00:00</time> <button class="start">START</button> <h2 class="titlebar">PLAYER SCORES </h2> <output class="score number">00 - 00</output> </section>