Media Query Support #5
Description
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.