2

次のようなメディア クエリを使用してモバイル専用 CSS を読み込んでいます

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" />

しかし、これらの CSS の変更に加えて、次のような HTML の一部を並べ替える必要もあります。

$('#moveOne').after($('#theOther');

ブラウザーが確実に mobile.css をロードした場合にのみ、この動きが実行されるようにします。そこで、mobile.css 内に奇妙な CSS 値を追加して、その値を次のようにチェックすることを考えました。

if($'#notVisible').css('color') == 'red') {
    $('#moveOne').after($('#theOther');
}

これを行うより良い方法はありますか？

4

2 に答える 2

1

私はあなたがしていることは絶対に良いと思います。

しかし、より論理的な方法は、widthの代わりに設定することですcolor。

if($'#notVisible').width() == '500px') {
    $('#moveOne').after($('#theOther');
}

また、matchMedia.jsを試すことができます

こちらもUsing_media_queries_from_codeをご覧ください。

于 2012-10-08T05:25:58.683 に答える
1

メディアクエリと同じロジックを常に使用できます

if (document.documentElement.clientWidth <= 480) {
    $('#moveOne').after($('#theOther');
}
于 2012-10-08T05:09:43.543 に答える