媒体查询调试

media query debug

本文关键字：调试 查询 媒体      更新时间：2023-09-26

我尝试创建一个响应式网站，需要看到在我当前的布局中分页符在哪里，然后我想到一些东西，告诉我它把当前窗口大小在每个窗口调整大小。我看到有人在这篇文章中谈到响应式布局。这里有一个关于函数的链接。我发现这个代码，但不能投入工作，现在是01:09，是晚上在这里在巴西和我疯了。有人能帮我吗?我在chrome测试。

<html>
    <head>
        <title>MediaQuery DBG</title>
        <SCRIPT LANGUAGE="JavaScript" SRC="http://code.jquery.com/jquery-1.6.4.js"></SCRIPT>
        <script type="text/javascript">
            $(document).ready(function() {
                var step = 1;
                var start = 1;
                var end = 2048;             
                var unit = "em";
                var command = "";
                var expression = "";
                for (cs=start;cs<=end;cs=cs+step)
                {
                    expression = "screen and (min-device-width: "+(cs-step)+unit") and (max-device-width: "+(cs)+unit")";
                    command = "var mql = window.matchMedia("+expression+");" +
                              "function handleOrientationChange(mql) {" + 
                                "   if (mql.matches) {" + 
                                "       $('"#lblmq'").replaceWith( '"<div id='lblmq'>tamanho: "+cs+"</div>'" ); " + 
                                "   }" + 
                                "}";
                    command = "mql.addListener("+command+");"
                    eval(command);
                });     
        </script>
        <style>
            #lblmq
            {
                background-color: #789;
                width:20em;
            }
        </style>
    </head>
    <body >
        <div id='lblmq'></div>
    </body>     
</html>

你有点迷路了。也许这些会有帮助:

  • http://johanbrook.com/design/css/debugging-css-media-queries
  • http://responsivepx.com/?www.google.com.br%2F 1051 x883&滚动条
  • http://developer.practicalecommerce.com/articles/3086-10-Frameworks-and-Tools-for-Responsive-Mobile-Optimized-Design

您需要的是:https://github.com/josscrowcroft/Window-Size-Bookmarklet

相关文章：