Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (49 sloc) 1.12 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MediaQueryList example</title>
<style>
html {
font-family: sans-serif;
background-color: white;
}
body {
padding: 20px;
margin: 10px;
background-color: blue;
border: 10px solid black;
}
h1, p {
text-align: center;
}
p {
font-size: 1.3rem;
}
</style>
</head>
<body>
<h1>matchMedia test</h1>
<p></p>
</body>
<script>
var para = document.querySelector('p');
var mql = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
para.textContent = 'This is a narrow screen — less than 600px wide.';
document.body.style.backgroundColor = 'red';
} else {
/* the viewport is more than than 600 pixels wide */
para.textContent = 'This is a wide screen — more than 600px wide.';
document.body.style.backgroundColor = 'blue';
}
}
screenTest(mql);
mql.addListener(screenTest);
mql.onchange = function() {
console.log(mql);
}
</script>
</html>
You can’t perform that action at this time.