Existe-t-il un javascript croisé pour créer des unités vh et vw?

Remarque: Ok alors que je tapeais cette question, je rencontrais cette question qui suggère d'utiliser la @media query mais a été invitée en 2011 …

Comme vous le savez, CSS3 présente de nouvelles unités de longueur de pourcentage de Viewport , vh et vw , ce que je ressens sont vraiment utiles pour une mise en page réactive, donc ma question est, y a-t-il une alternative JavaScript / jQuery pour cela? De plus en plus de l'utiliser pour les tailles de police, est-il sûr d'utiliser pour dimensionner les éléments? Comme exemple

 div { height: 6vh; width: 20vh; /* Note am using vh for both, do I need to use vw for width here? */ }

Mise à jour 5: .css (propriété) fix Les plugins comme fancyBox utilisent .css .css('margin-right') pour récupérer la marge droite d'un élément et .css('margin-right', '12px') pour définir la marge droite de un élément. Cela a été brisé, car il n'y avait pas de vérification si les props sont une chaîne et s'il y a plusieurs arguments. Corrigez-le en vérifiant si les props sont une chaîne. Si tel est le cas, il y a plusieurs arguments, les arguments sont réécrits dans un objet, sinon, parseProps( $.extend( {}, props ) ) n'est pas utilisé.

Mise à jour 4: Plugin pour les mises en page réactives https://github.com/elclanrs/jquery.columns (en cours)

J'ai donné un (long) essai. Voici d'abord l'exemple CSS: http://jsbin.com/orajac/1/edit#css . (Redimensionner le panneau de sortie). Notez que la font-size la font-size ne fonctionne pas avec les unités de fenêtre, au moins sur le dernier Chrome.

Et voici ma tentative de faire cela avec jQuery. La démonstration jQuery qui fonctionne avec la police est également à http://jsbin.com/izosuy/1/edit#javascript . N'a pas beaucoup testé, mais il semble fonctionner avec la plupart des propriétés, car il suffit de convertir les valeurs en pixels, puis en appelant le plugin sur window.resize il conserve la mise à jour.

Mise à jour: code mis à jour pour fonctionner avec de nombreux navigateurs. Testez localement si vous utilisez autre chose que Chrome, car jsBin agit un peu bizarre avec window.resize .

Mise à jour 2: Étendre la méthode native css .

Mise à jour 3: gérer l'événement window.resize à l'intérieur du plugin afin que l'intégration soit désormais transparente.

The gist (pour tester localement): 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' });

Je suis confronté à ce problème avec le navigateur stocker Android 4.3 (ne supporte pas vw, vh, etc.). La façon dont j'ai résolu cela est d'utiliser «rem» comme unité de taille de police et de modifier dynamiquement la taille de police <html> avec 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' }); });

Et dans votre css, vous pouvez utiliser «rem» au lieu de px, ems, etc.

 .element { font-size: 2.5rem; /* this is equivalent to 2.5vw */ }

Voici une démo du code: http://jsfiddle.net/4ut3e/

J'ai écrit une petite aide pour résoudre ce problème. Il est pris en charge sur tous les navigateurs principaux et utilise jQuery.
C'est ici:

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"); } };

Exemple simple de l'utiliser 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>

Il est disponible sur GitHub:
https://github.com/kgadzinowski/Support-Css-Vh-Vw

Exemple sur JSFiddle: http://jsfiddle.net/5MMWJ/2/

Vminpoly est le seul polyfill que je connaisse – c'est en cours de développement, mais fonctionne à partir de cette publication. Il existe des polyfills statiques dans le cadre des colonnes Jquery et des projets sans craintes .

Je viens de faire une solution très moche, mais parfaitement fonctionnelle pour cela avec PURE CSS (sans JS nécessaire). J'ai rencontré une feuille de style CSS pleine de déclarations 'vw' (également pour les hauteurs et les propriétés supérieures / inférieures) qui devaient être réécrites pour le navigateur Android natif (qui, dans les versions 4.3 et suivantes, ne supporte pas les unités 'vw').

Au lieu de réécrire tout à des pourcentages, par rapport à la largeur des parents (donc le plus profond dans DOM, les calculs les plus compliqués), ce qui me causerait un mal de tête avant même d'atteindre la première déclaration {height: Xvw}, je me suis généré Feuille de style suivante: http://splendige.pl/vw2rem.css

Je suppose que vous êtes tous familiers avec les unités 'em' (sinon: http://www.w3schools.com/cssref/css_units.asp ). Après quelques tests, j'ai découvert que les anciens navigateurs Android (ainsi que tous les autres) supportent parfaitement les unités «rem», qui fonctionnent de la même manière que «em», mais sont relatives à la déclaration de taille de police de l'élément ROOT (dans la plupart des cas, La balise html).

Donc, la façon la plus simple de le faire était de déclarer la taille de la police pour la balise html égale à 1% de la largeur de la fenêtre, par exemple 19.2px pour la fenêtre 1920px et utiliser beaucoup de requêtes multimédias pour toute la gamme 1920-320px. De cette façon, j'ai fait l'unité 'rem' égale à 'vw' dans toutes les résolutions (l'étape est 10px, mais vous pouvez même essayer de déclarer html {font-size} pour chaque 1px). Ensuite, j'ai simplement remplacé batch 'vw' par 'rem' et j'ai admiré la mise en page de travail sur Android 4.3 navigateur natif.

Dans ce cas, vous pouvez ensuite redéployer la taille de la police, même pour l'étiquette du corps entier (dans les unités que vous souhaitez: px, em, pt, etc.) et NE PAS affecter l'égalité 'rem' à 'vw' dans la feuille de style complète .

J'espère que cela t'aides. Je sais que c'est un peu idiot, mais qui fonctionne comme un charme. Rappelez-vous: si quelque chose semble stupide, mais fonctionne, ce n'est pas stupide 🙂

"Jquery.columns" est jusqu'à présent la meilleure solution.

https://github.com/elclanrs/jquery.columns

Vous n'avez besoin que de 2 lignes de codes pour transformer "vh" en une "échelle de tous les navigateurs".

Déclarez une classe en html:

 <img src="example.jpg" class="width50vh" />

Ensuite, en javascript:

 $('.width50vh').css({width: '50vw'});

J'ai publié une petite bibliothèque qui facilite l'utilisation des dimensions relatives à la fenêtre. Gardez à l'esprit que ce n'est pas un polyfill, donc il vous faut appliquer des classes sur les éléments que vous souhaitez redimensionner. Par exemple, <div class="vh10 vw30">hello</div> comblera 10% de la hauteur et 30% de la largeur.

Vérifiez: https://github.com/joaocunha/v-unit