Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Define media-query breakpoints only once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single point of breakpoint-definition</title>
<style>
/*
Baseline:
*/
body::before {
display: block;
content: "default-no-mq";
}
#test {
width: 100px;
height: 100px;
background: grey;
font-family: "default-no-mq", monospace;
}
#test2 {
content: "default-no-mq";
}
/*
Medium-screen width:
*/
@media all and (min-width: 600px) {
body::before {
content: "medium-screen";
}
#test {
font-family: "medium-screen", monospace;
background: red;
}
#test2 {
content: "medium-screen";
}
}
/*
Large-screen width:
*/
@media all and (min-width: 1200px) {
body::before {
content: "large-screen";
}
#test {
font-family: "large-screen", monospace;
background: green;
}
#test2 {
content: "large-screen";
}
}
</style>
</head>
<body>
<h1>Define breakpoints once</h1>
<div id="test">
Test-div
</div>
<div id="test2"></div>
<script>
function whereAmI(id) {
console.log("Test1: ", window.getComputedStyle(document.getElementById("test"),null).getPropertyValue('font-family') )
console.log("Test2: ", window.getComputedStyle(document.getElementById("test2"),null).getPropertyValue('content') )
}
whereAmI()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment