1

基本的に、私はクライアントの要求に応じてメディア クエリを使用してレスポンシブに Web サイトをプログラミングし始めました。そこで、ブレークポイントをプラグインして、使用されているデバイスを示すボディにクラスまたは ID を追加できる jQuery プラグインを開発しました。プラグインコードは次のとおりです。

( function ( $ ) {

    $.fn.windowDimensions = function( options ) {

        var config = $.extend({
            attr                :           'id',
            largeDesktop        :           1600,
            smallDesktop        :           1024,
            tablet              :           768,
            largePhone          :           640,
            smallPhone          :           480,
            smallPhoneName      :           'smallPhone',
            largePhoneName      :           'largePhone',
            tabletName          :           'tablet',
            smallDesktopName    :           'smallDesktop',
            largeDesktopName    :           'largeDesktop'
        }, options );

        var w = 0, className = '';

        $( this ).on('resize ready', function() {

            w = $( this ).width();

            if( w <= config.smallPhone ) {
                className = config.smallPhoneName;
            } else if( w <= config.largePhone && w > config.smallPhone ) {
                className = config.largePhoneName;
            } else if( w <= config.tablet && w > config.largePhone ) {
                className = config.tabletName;
            } else if( w <= config.smallDesktop && w > config.tablet ) {
                className = config.smallDesktopName;
            } else {
                className = config.largeDesktopName;
            }

            $('body').attr( config.attr, className );
        }); 

    };

}) ( jQuery );

基本的に、デフォルトのままにしてプラグインをインスタンス化するとid="tablet"、ipad の body タグに が適用されます。そこから css を使用して、次のような要素のスタイルを設定します。

.wrap { ... }
#tablet .wrap { ... }
#largPhone .wrap { ... }
#smallPhone .wrap { ... }

これはおそらく最善の方法でも従来の方法でもないことはわかっていますが、これよりも優れた方法は他にありません。これにアプローチするより良い方法、またはより最適なソリューションはありますか?

4

1 に答える 1

0

この js を ie7 メディア クエリのサポートhttps://code.google.com/p/css3-mediaqueries-js/に使用し、これを head タグに含めます。詳細情報はこちらhttp://cssmatter.com/blog/ie7-and -ie8-support-for-css3-media-query/
またはこれ(respond.js) https://github.com/scottjehl/Respondを実行できます

于 2013-08-28T17:00:18.370 に答える