问匹配媒体polyfill工具
EN

Stack Overflow用户

提问于 2015-05-12 14:39:26

回答 1查看 468关注 0票数 0

polyfill是如何工作的，为什么可以工作？

w.matchMedia = w.matchMedia || (function( doc, undefined ) {

        var bool,
            docElem = doc.documentElement,
            refNode = docElem.firstElementChild || docElem.firstChild,
            // fakeBody required for <FF4 when executed in <head>
            fakeBody = doc.createElement( "body" ),
            div = doc.createElement( "div" );

        div.id = "mq-test-1";
        div.style.cssText = "position:absolute;top:-100em";
        fakeBody.style.background = "none";
        fakeBody.appendChild(div);

        return function(q){

            div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";

            docElem.insertBefore( fakeBody, refNode );
            bool = div.offsetWidth === 42;
            docElem.removeChild( fakeBody );

            return {
                matches: bool,
                media: q
            };

        };

    }( w.document ));

paulirish还以另一种类似方式实现它，即https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js

关键代码如下

info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;

        styleMedia = {
            matchMedium: function(media) {
                var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';

                // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
                if (style.styleSheet) {
                    style.styleSheet.cssText = text;
                } else {
                    style.textContent = text;
                }

                // Test if media query is true or false
                return info.width === '1px';
            }
        };

css

media-queries

polyfills

回答 1

Stack Overflow用户

发布于 2015-05-13 01:43:21

两者的工作方式是一样的。

它们只是注入您作为参数传递的媒体，并使用它来应用预定义的样式(第一个样式的宽度为42px，第二个样式的宽度为1px )，

如果元素的宽度确实是预定义的宽度，则媒体正在工作，并且函数的计算结果为true

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30183550

复制

相似问题

问匹配媒体polyfill工具
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问匹配媒体polyfill工具EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问匹配媒体polyfill工具
EN