媒体查询调试

发布于 2024-12-07 18:19:51 字数 1952 浏览 0 评论 0 原文

我尝试创建一个响应式网站，需要查看当前布局中的分页符在哪里，然后我想一些告诉我它将当前窗口大小放入每个窗口调整大小中的东西。我在这篇文章中看到有人讲述了响应式布局。有关该函数的链接此处。我找到了这段代码，但无法投入使用，现在是 01:09，这是巴西的夜晚，我快疯了。有人可以帮助我吗？我正在 Chrome 中进行测试。作者告诉它把当前尺寸放在页面的一角，单位是em；

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

原文

I trying create a responsive site and need see where is page break in my current layout then i think about something that tell me it putting te current window size in each window resize.
I see someone telling about responsive layout in this post. A link about the function here.
I found this code but cant put to work, now is 01:09, is night here in brazil and im getiing crazy. Someone can help me ? Im testing in chrome. The author tell it put current size in corner of page in em;

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

分享到QQ

分享到微博