Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

254
Visualizações
Escalado proporcional con CSS y JavaScript

Estoy tratando de hacer una página web que cambie de tamaño según el tamaño de la ventana y el siguiente código parece ser la solución.

var scale = Math.min( availableWidth / contentWidth, availableHeight / contentHeight );

¿Podría alguien decirme por qué funciona esto y qué estamos haciendo exactamente con esto?

Consulte esto para obtener más información.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

El código que publicaste toma la relación porcentual entre el ancho de un determinado componente y el ancho de toda la página y la altura del mismo componente con la altura de toda la página, pero solo obtiene la proporción más pequeña entre los dos calculada para considere si la página está en formato horizontal o vertical.

Aparentemente, este número resultante de esta línea que publicó se utilizará para que pueda calcular el valor que desea obtener dado el cambio en la pantalla predeterminada que solía dibujar. Suponiendo que el lienzo en el que está dibujando el diseño predeterminado es de 1024 px por 768 px, lo haríamos así:

 var scale = Math.min( availableWidth / /*1024px*/ contentWidth, /*500px => (100 / 2048) = 48.82% of available height */ availableHeight / /*768px/* contentHeight /*145px (100 / 5.2965) = 19.02% of available height*/ );

En este caso su línea traería 19.02%, porque el método Math.min trae el más pequeño de la matriz. Por lo tanto, usaría la altura de este objeto como referencia para determinar también su ancho, con el fin de tratar de mantener la relación de aspecto de la página. Pero lo ideal, en mi opinión, es que aprendas a lidiar con el diseño flexible, tal vez incluso con bootstrap, para construir cuadrículas receptivas con menos trabajo, ya que el CSS escalará por ti según el tamaño de la pantalla de forma nativa, sin necesidad de calculos ;D

about 4 years ago · Juan Pablo Isaza Relatório

0

Creo que este código está tratando de calcular la proporción de escala que debe ajustar el contenido en función de los diferentes tamaños de ventana.

Por ejemplo, diseña el sitio web en la ventana de tamaño 1600*960px, pero parte del contenido no se puede mostrar completamente cuando va a una ventana de 300*200, por lo que necesita tener una proporción a escala para que el contenido pueda ser mostrado en el estilo correcto

Los availableHeight y availableWidth son el tamaño de la ventana. contentWidth y contentHeight es el tamaño de un contenido específico ( div en el documento)

Divide el tamaño de la ventana al tamaño del contenido y obtiene el más pequeño de ellos usando Math.min() se asegurará de usar la mayor cantidad de espacio de la ventana, pero no hará que el contenido sea demasiado grande o no siga el efecto que desea.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda