html
html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="main">
<p class="p1"></p>
<p class="p2"></p>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
body {
margin: 0;
}
#main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var p1, p2;
function detectMedia() {
p1 = document.querySelector(".p1");
p2 = document.querySelector(".p2");
var mediaSize = matchMedia("(min-width: 500px)");
if(mediaSize.matches) msg1 = "Screen size greater than 500px";
else msg1 = "Screen size smaller than 500px";
p1.innerText = msg1;
var mediaOrt = matchMedia("(orientation: portrait)");
if(mediaOrt.matches) msg2 = "orientation: portrait";
else msg2 = "orientation: landscape";
p2.innerText = msg2;
}
onload = detectMedia;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run