Grid-Layout-Polyfill icon indicating copy to clipboard operation
Grid-Layout-Polyfill copied to clipboard

Published 20 hours ago • verified publisher icon codler

Media Query Support

Open antoyo opened this issue 11 years ago • 1 comments

Hello.

This polyfill does not support the use of media queries. It would be nice to add this support.

Here is an example code with two grids and one of them does not become a grid because of the use of media queries:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Grid Layout</title>

        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="grid-layout-polyfill.min.js"></script>

        <style>
        @media only screen and (min-device-width: 480px) {
            .grid {
                display: -ms-grid;
            }

            .line1 {
                -ms-grid-row: 1;
            }

            .line2 {
                -ms-grid-row: 2;
            }

            .col1 {
                -ms-grid-column: 1;
            }

            .col2 {
                -ms-grid-column: 2;
            }
        }
        </style>
    </head>
    <body>
        <div class="grid" style="display: -ms-grid">
            <div class="line1 col1" style="-ms-grid-row: 1; -ms-grid-column: 1">Column 1</div>
            <div class="line1 col2" style="-ms-grid-row: 1; -ms-grid-column: 2">Column 2</div>
            <div class="line2 col1" style="-ms-grid-row: 2; -ms-grid-column: 1">Column 2-1</div>
            <div class="line2 col2" style="-ms-grid-row: 2; -ms-grid-column: 2">Column 2-2</div>
        </div>
        <br/>
        <div class="grid">
            <div class="line1 col1">Column 1</div>
            <div class="line1 col2">Column 2</div>
            <div class="line2 col1">Column 2-1</div>
            <div class="line2 col2">Column 2-2</div>
        </div>
    </body>
</html>

Thanks.

antoyo avatar May 09 '14 15:05 antoyo

Adding reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries#Receiving_query_notifications https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

codler avatar Aug 24 '14 20:08 codler