Question

所以基本上我开始根据客户的要求使用媒体查询编写一个网站编程，当我的客户惊讶地告诉我网站必须在IE7中响应时？！？！？！所以我开发了一个jQuery插件，允许你插入断点，然后将一个类或id附加到正文，表示正在使用哪个设备。这是插件代码：

( 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 { ... }

我知道这可能不是最好的也不是传统的做事方式，但我不知道其他任何方式做得更好。有没有更好的方法来解决这个问题或更优化的解决方案？

Answer 1

将此js用于ie7媒体查询支持https://code.google.com/p/css3-mediaqueries-js/，并在头标记中包含此内容，更多信息http://cssmatter.com/blog/ie7-and-ie8-support-for-css3-media-query/
或者你可以这个（respond.js）https://github.com/scottjehl/Respond

使用前缀id标签而不是媒体查询响应式网站是不是很糟糕？

1 个答案: