MatchMedia.js是否包含在Modernizr JS中?

时间:2011-12-22 09:40:56

标签: javascript jquery frontend modernizr

我正在使用

<script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.js"></script>

<!--    <script>

</script>-->

    <script>
        if (matchMedia('only screen and (min-width : 1025px) and (max-width : 2048px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?



    $( document ).ready( function() {
                var $body = $('body'); //Cache this for performance

                var setBodyScale = function() {
                    var scaleFactor = 0.5,
                        scaleSource = $body.width(),
                        maxScale = 150,
                        minScale = 10;

                    var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                    if (fontSize > maxScale) fontSize = maxScale;
                    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                    $('body').css('font-size', fontSize + '%');
                }

                $(window).resize(function(){
                    setBodyScale();
                });

                //Fire it when the page first loads:
                setBodyScale();
            });
            }
            </script>

现在,如果我将matchmedia.js替换为Modernizr.JS,那么上面的代码是否有用?

1 个答案:

答案 0 :(得分:7)

Modernizr使用类似mq的东西。这是文档:http://www.modernizr.com/docs/#mq

基本上,你要将你的行改为:

if (Modernizr.mq('only screen and (min-width : 1025px) and (max-width : 2048px)')) {