0

Soporte de la funcion calc de CSS usando alguna libreria de javascript para poder hacer mi sitio responsivo para navegadores antiguo que aun tiene cuota de mercado pero no tienen soporte de la funcion calc de css segun calc-caniuse

un ejemplo de codigo donde el tamanio de la fuente y la caja cambia segun el ancho de pantalla

.padding-responsive {
  padding: calc( (150 * (100vw - 600px) - 30 * (100vw - 1440px)) / (1440 - 600) );
}

.font-size-responsive {
  font-size: calc( (50 * (100vw - 600px) - 24 * (100vw - 1440px)) / (1440 - 600) );
}

.square-responsive {
  background-color: blue;
  width: calc( (500 * (100vw - 600px) - 155 * (100vw - 1440px)) / (1440 - 600) );
  height: calc( (500 * (100vw - 600px) - 155 * (100vw - 1440px)) / (1440 - 600) );
}
<div class="padding-responsive">
   <p class="font-size-responsive">TAMANIO DE FUENTE Y CAJA RESPONSIVO CON CALC CSS</p>
  <div class="square-responsive"></div>
  
</div>

, el codigo tambien se encuentra en https://codepen.io/jasbel/pen/RwrOKMO donde se puede ver mejor

introducir la descripción de la imagen aquí

El metodo de calculo responsivo inspirado se encuentra en https://stackoverflow.com/questions/15649244/responsive-font-size-in-css

ESTARIA MUY AGRADECIDO SI HAY ALGUNA DE FORMA DE DAR SOPORTE EXTRAYENDO LOS VALORES DE CSS CALC, CALCULARLOS CON JAVASCRIPT Y DEVOLVER EL VALOR, GRACIAS DE ANTEMANO A SU RESPUESTA

!IMPORTANT: LA FUNCION

 `calc((maxSize * (100vw - minWidthScreenPX) - minSize * (100vw - maxWidthScreenPX)) / (maxWidthScreen - minWidthScreen));` 

ES NECESARIO PARA HACER MI SITIO RESPONSIVO

1 respuesta 1

1

Para compatibilidad puedes usar un polyfill para CSS calc() usando https://github.com/closingtag/calc-polyfill.

Por otra parte, puedes lograr calcular el mismo calculo usando javascript, pero se torma un poco mas complejo y menos automatico, dentro del evento window.onresize:

window.addEventListener("resize",function(){
    var items=document.getElementsByClassName("padding-responsive");
    for(var idx in items){
       items[idx].style.padding=( (150 * (window.innerWidth - 600) - 30 * (window.innerWidth - 1440)) / (1440 - 600))+"px";
    }
})

Y asi con los otros valores

Finalmente, si lo que deseas es mantener todo el contenido que mantenga una cierta proporcion, puedes basar todas las medidas en vw/vh, y no mezclar con medidas en px, ya que no produciran un resultado siempre proporcional.

.padding-responsive {
  padding: 4vw;
}

.font-size-responsive {
  font-size: 4vw;
}

.square-responsive {
  background-color: blue;
  width: 24vw;
  height: 24vw;
}
<div class="padding-responsive">
   <p class="font-size-responsive">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi dolor possimus impedit.</p>
  <div class="square-responsive"></div>
  
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.