Instantly share code, notes, and snippets.

Embed
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>
@elwinschmitz

This comment has been minimized.

Copy link
Owner Author

elwinschmitz commented Apr 25, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment