1

因此，基本上我开始根据客户的要求使用媒体查询响应式地编写网站，但令人惊讶的是，我的客户告诉我该网站必须在 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 { ... }

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

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 回答