注：この質問を入力しているときに、使用を提案するこの質問に出くわしまし
@media queryたが、2011年に尋ねられました...
ご存じのように、CSS3 は新しいViewport-percentage length units、 、vhおよびvwを導入しています。これは、堅実なレスポンシブ レイアウトに非常に役立つと思います。私の質問は、これに代わる JavaScript/jQuery はありますか? フォントサイズに使用する以外に、要素のサイズ変更に使用しても安全ですか? 例のように
div {
height: 6vh;
width: 20vh; /* Note am using vh for both, do I need to use vw for width here? */
}
更新 5: .css(property) fix fancyBox.css('margin-right')などのプラグインは、要素の右マージンをフェッチし、要素の右マージンを設定するために使用し.css('margin-right', '12px')ます。propsが文字列であるかどうか、および複数の引数が指定されているかどうかのチェックがなかったため、これは壊れていました。が文字列かどうかを確認して修正しましたprops。複数の引数がある場合、引数はオブジェクトに書き換えられ、それ以外の場合parseProps( $.extend( {}, props ) )は使用されません。
更新 4:レスポンシブ レイアウトのプラグインhttps://github.com/elclanrs/jquery.columns (作業中)
私はこれを（長い）試しました。まず、CSS の例を次に示します: http://jsbin.com/orajac/1/edit#css。(出力パネルのサイズを変更します)。font-size少なくとも最新の Chrome では、ビューポート ユニットでは機能しないことに注意してください。
そして、これがjQueryでこれを行う私の試みです。このフォントでも動作する jQuery デモはhttp://jsbin.com/izosoy/1/edit#javascriptにあります。広範囲にテストしていませんが、値をピクセルに変換するだけで、プラグインを呼び出すwindow.resizeことで更新を続けるため、ほとんどのプロパティで動作するようです。
更新:多くのブラウザーで動作するようにコードを更新しました。Chrome 以外のものを使用している場合は、ローカルでテストしてくださいwindow.resize。
更新 2:ネイティブcssメソッドを拡張します。
更新 3:プラグイン内で window.resize イベントを処理するため、統合がシームレスになりました。
要点 (ローカルでテストするため): 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'
});Android 4.3 ストック ブラウザでこの問題に直面しています (vw、vh などをサポートしていません)。私がこれを解決した方法は、「rem」をフォントサイズ単位として使用し、< html >のフォントサイズを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'
});
});
cssでは、px、emsなどの代わりに「rem」を使用できます
.element {
font-size: 2.5rem; /* this is equivalent to 2.5vw */
}
コードのデモは次のとおりです: http://jsfiddle.net/4ut3e/
この問題に対処するための小さなヘルパーを書きました。すべての主要なブラウザーでサポートされており、jQuery を使用します。
ここにあります：
サポートVhVw.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");
}
};
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>
GitHub で入手できます:
https://github.com/kgadzinowski/Support-Css-Vh-Vw
JSFiddle の例:
http://jsfiddle.net/5MMWJ/2/
私は非常に醜いが、このWITH PURE CSS（JSは不要）に対して完全に機能する回避策を作成しました。ネイティブの Android ブラウザー (バージョン 4.3 以下では 'vw' ユニットをサポートしていません) 用に書き直す必要がある 'vw' 宣言 (高さと上下のプロパティも) でいっぱいの CSS スタイルシートに出くわしました。
最初の { height: Xvw } 宣言に到達する前に頭痛の種になる、親の幅に相対的なパーセンテージにすべてを書き換える代わりに (DOM が深くなるほど、最も複雑な計算になります)、私は自分で以下のスタイルシート: http://splendige.pl/vw2rem.css
皆さんは「em」単位に精通していると思います (そうでない場合: http://www.w3schools.com/cssref/css_units.asp )。いくつかのテストの後、古い Android ブラウザー (および他のすべてのブラウザー) が「rem」単位を完全にサポートしていることを発見しました。これは「em」と同じように機能しますが、ROOT 要素の font-size 宣言 (ほとんどの場合、 html タグ)。
したがって、これを機能させる最も簡単な方法は、ビューポートの幅の 1% に等しい html タグのフォント サイズを宣言することです。たとえば、1920 ピクセルのビューポートの場合は 19.2 ピクセルで、1920 ～ 320 ピクセルの範囲全体に対して多くのメディア クエリを使用します。このようにして、すべての解像度で「rem」単位を「vw」に等しくしました (ステップは 10px ですが、1px ごとに html{font-size} を宣言することもできます)。次に、'vw' を 'rem' に一括置換し、Android 4.3 ネイティブ ブラウザでの作業レイアウトを賞賛しました。
さらに、 body タグ全体に対しても font-size を再宣言できます (必要な単位: px、em、pt など)。スタイルシート全体で「rem」と「vw」の同等性には影響しません.
お役に立てれば。ちょっとばかげているように見えますが、魅力のように機能します。覚えておいてください：何かがばかげているように見えても機能する場合、それはばかではありません:)
「jquery.columns」は、これまでのところ最良のソリューションです。
https://github.com/elclanrs/jquery.columns
"vh" を "all-browser scale" に変えるには 2 行のコードしか必要ありません。
html でクラスを宣言します。
<img src="example.jpg" class="width50vh" />
次にJavaScriptで：
$('.width50vh').css({width: '50vw'});
ビューポート相対寸法の使用を容易にする小さなライブラリを公開しました。これはポリフィルではないことに注意してください。そのため、サイズを変更する要素にクラスを適用する必要があります。たとえば<div class="vh10 vw30">hello</div>、高さの 10% と幅の 30% を埋めます。
確認してください: https://github.com/joaounha/v-unit