vmax - ¿Hay algún javascript entre navegadores para hacer que las unidades vh y vw funcionen?
viewport css (7)
Nota: Ok, mientras escribía esta pregunta me encontré con this pregunta que sugiere usar la
@media querypero se me preguntó en 2011 ...
Como saben, CSS3 introduce nuevas unidades de longitud de porcentaje de la ventana vh , vh y vw , que creo que son realmente útiles para un diseño receptivo sólido, por lo que mi pregunta es si existe alguna alternativa de JavaScript / jQuery para esto. Más aparte de usarlo para tamaños de fuente, ¿es seguro usarlo para dimensionar elementos? Como ejemplo
div {
height: 6vh;
width: 20vh; /* Note am using vh for both, do I need to use vw for width here? */
}
"jquery.columns" es hasta ahora las mejores soluciones.
github.com/elclanrs/jquery.columns
Solo necesita 2 líneas de códigos para convertir "vh" en una "escala de todos los navegadores".
Declara una clase en html:
<img src="example.jpg" class="width50vh" />
Luego en javascript:
$(''.width50vh'').css({width: ''50vw''});
Acabo de hacer una solución muy fea, pero perfectamente funcional para esto CON PURE CSS (no se necesita JS). Me encontré con una hoja de estilo CSS llena de declaraciones ''vw'' (también para alturas y propiedades superiores / inferiores) que debían reescribirse para el navegador Android nativo (que en las versiones 4.3 y siguientes NO admite unidades ''vw'').
En lugar de reescribir todo en porcentajes, que son relativos al ancho de los padres (así que cuanto más profundo en DOM, los cálculos más complicados), lo que me daría un dolor de cabeza incluso antes de llegar a la primera declaración {height: Xvw}, me generé el siguiente hoja de estilo: http://splendige.pl/vw2rem.css
Supongo que todos están familiarizados con las unidades ''em'' (si no: http://www.w3schools.com/cssref/css_units.asp ). Después de algunas pruebas, descubrí que los navegadores antiguos de Android (así como todos los demás) admiten perfectamente las unidades rem, que funcionan igual que ''em'', pero son relativas a la declaración de tamaño de fuente del elemento ROOT (en la mayoría de los casos la etiqueta html).
Así que la forma más sencilla de hacerlo funcionar es declarar el tamaño de fuente para etiqueta html que es igual al 1% del ancho de la ventana gráfica, por ejemplo, 19.2 píxeles para la ventana gráfica de 1920px y utilizar muchas consultas de medios para todo el rango 1920-320px. De esta manera hice que la unidad ''rem'' fuera igual a ''vw'' en todas las resoluciones (el paso es 10px, pero incluso puedes intentar declarar html {font-size} por cada 1px). Luego simplemente cambié por lotes ''vw'' con ''rem'' y admiré el diseño funcional del navegador nativo Android 4.3.
Es más, puede redeclarar el tamaño de fuente incluso para la etiqueta de cuerpo entero (en las unidades que desee: px, em, pt, etc.) y NO afecta la igualdad ''rem'' a ''vw'' en toda la hoja de estilo .
Espero que esto ayude. Sé que parece un poco tonto, pero funciona como un encanto. Recuerda: si algo parece estúpido, pero funciona, no es estúpido :)
Escribí una pequeña ayuda para enfrentar este problema. Es compatible con todos los navegadores principales y usa jQuery.
Aquí está:
SupportVhVw.js
function SupportVhVw() {
this.setVh = function(name, vh) {
jQuery(window).resize( function(event) {
scaleVh(name, vh);
});
scaleVh(name, vh);
}
this.setVw = function(name, vw) {
jQuery(window).resize( function(event) {
scaleVw(name, vw);
});
scaleVw(name, vw);
}
var scaleVw = function(name, vw) {
var scrWidth = jQuery(document).width();
var px = (scrWidth * vw) / 100;
var fontSize = jQuery(name).css(''font-size'', px + "px");
}
var scaleVh = function(name, vh) {
var scrHeight = jQuery(document).height();
var px = (scrHeight * vh) / 100;
var fontSize = jQuery(name).css(''font-size'', px + "px");
}
};
Ejemplo simple de cómo usarlo en HTML:
<head>
<title>Example</title>
<!-- Import all libraries -->
<script type="text/javascript" src="js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/libs/SupportVhVw.js"></script>
</head>
<body>
<div id="textOne">Example text one (vh5)</div>
<div id="textTwo">Example text two (vw3)</div>
<div id="textThree" class="textMain">Example text three (vh4)</div>
<div id="textFour" class="textMain">Example text four (vh4)</div>
<script type="text/javascript">
// Init object
var supportVhVw = new SupportVhVw();
// Scale all texts
supportVhVw.setVh("#textOne", 5);
supportVhVw.setVw("#textTwo", 3);
supportVhVw.setVh(".textMain", 4);
</script>
</body>
Está disponible en GitHub:
https://github.com/kgadzinowski/Support-Css-Vh-Vw
Ejemplo en JSFiddle: http://jsfiddle.net/5MMWJ/2/
Me enfrento a este problema con el navegador de valores de Android 4.3 (no es compatible con vw, vh, etc.). La forma en que resolví esto es usar ''rem'' como una unidad de tamaño de fuente y cambiar dinámicamente el tamaño de fuente de <html> con javascript
function viewport() {
var e = window, a = ''inner'';
if (!(''innerWidth'' in window )) {
a = ''client'';
e = document.documentElement || document.body;
}
return { width : e[ a+''Width'' ] , height : e[ a+''Height'' ] };
}
jQuery(window).resize(function(){
var vw = (viewport().width/100);
jQuery(''html'').css({
''font-size'' : vw + ''px''
});
});
y en su CSS puede usar ''rem'' en lugar de px, ems, etc.
.element {
font-size: 2.5rem; /* this is equivalent to 2.5vw */
}
Aquí hay una demostración del código: http://jsfiddle.net/4ut3e/
Publiqué una pequeña lib que facilita el uso de dimensiones relativas a ventanas. Tenga en cuenta que no es un relleno sintético, por lo que requiere que aplique clases sobre los elementos que desea cambiar el tamaño. Por ejemplo, <div class="vh10 vw30">hello</div> llenará el 10% de la altura y el 30% del ancho.
Compruébelo: https://github.com/joaocunha/v-unit
Vminpoly es el único Vminpoly que conozco, está en desarrollo pero funciona a partir de esta publicación. Hay polyfills estáticos como parte de github.com/elclanrs/jquery.columns y -prefix-free proyectos -prefix-free .
Actualización 5: .css (propiedad) fix Los complementos como fancyBox usan fancyBox .css(''margin-right'') para buscar el margen derecho de un elemento y .css(''margin-right'', ''12px'') para establecer el margen derecho de un elemento. Esto estaba roto, porque no había ningún control si props es una cadena y si hay varios argumentos dados. Se corrigió comprobando si props es una cadena. Si es así y hay múltiples argumentos, los argumentos se reescriben en un objeto, de lo contrario no se parseProps( $.extend( {}, props ) ) .
Actualización 4: complemento para diseños receptivos github.com/elclanrs/jquery.columns (en proceso)
Di esto un (largo) intento. Primero, aquí está el ejemplo de CSS: http://jsbin.com/orajac/1/edit#css . (cambiar el tamaño del panel de salida). Tenga en cuenta que el font-size no funciona con las unidades de ventana gráfica, al menos en las últimas Chrome.
Y aquí está mi intento de hacer esto con jQuery. La demostración de jQuery que también funciona con la fuente está en http://jsbin.com/izosuy/1/edit#javascript . No lo he probado exhaustivamente, pero parece funcionar con la mayoría de las propiedades, ya que solo está convirtiendo los valores a píxel y luego llamando al plugin en window.resize y continúa actualizándose.
Actualización: código actualizado para trabajar con muchos navegadores. Prueba localmente si estás utilizando algo que no sea Chrome porque jsBin actúa un poco raro con window.resize .
Actualización 2: Extienda el método nativo de css .
Actualización 3: maneje el evento window.resize dentro del complemento para que la integración sea perfecta.
La esencia (para probar localmente): https://gist.github.com/4341016
/*
* CSS viewport units with jQuery
* http://www.w3.org/TR/css3-values/#viewport-relative-lengths
*/
;(function( $, window ){
var $win = $(window)
, _css = $.fn.css;
function viewportToPixel( val ) {
var percent = val.match(/[/d.]+/)[0] / 100
, unit = val.match(/[vwh]+/)[0];
return (unit == ''vh'' ? $win.height() : $win.width()) * percent +''px'';
}
function parseProps( props ) {
var p, prop;
for ( p in props ) {
prop = props[ p ];
if ( /[vwh]$/.test( prop ) ) {
props[ p ] = viewportToPixel( prop );
}
}
return props;
}
$.fn.css = function( props ) {
var self = this
, originalArguments = arguments
, update = function() {
if ( typeof props === ''string'' || props instanceof String ) {
if (originalArguments.length > 1) {
var argumentsObject = {};
argumentsObject[originalArguments[0]] = originalArguments[1];
return _css.call(self, parseProps($.extend({}, argumentsObject)));
} else {
return _css.call( self, props );
}
} else {
return _css.call( self, parseProps( $.extend( {}, props ) ) );
}
};
$win.resize( update ).resize();
return update();
};
}( jQuery, window ));
// Usage:
$(''div'').css({
height: ''50vh'',
width: ''50vw'',
marginTop: ''25vh'',
marginLeft: ''25vw'',
fontSize: ''10vw''
});