Media Query Mixin

In this example below you will see how to do a Media Query Mixin with some HTML / CSS and Javascript

Durable media query mixin that can take in multiple arguments. Simply call "null" in for any arguments you don't want to use, or declare the variable you do want to use when including the mixin.

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Media Query Mixin</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="header">
  <h1 class="header__title">The Ultimate Media Query Mixin</h1>
  <a href="http://praliedutzel.com/the-ultimate-media-query-mixin/" target="_blank">Read the Article</a>
</header>

<div class="block">
  Resize me!
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/praliedutzel/media-query-mixin-XXWZoJ */
.block {
  background-color: #6ddce5;
}
@media screen and (min-width: 48em) and (max-width: 64em) {
  .block {
    background-color: #9b59b6;
  }
}
@media screen and (min-width: 65em) {
  .block {
    background-color: #2ecc71;
  }
}
@media screen and (max-height: 30em) {
  .block {
    background-color: #3498db;
  }
}

body {
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #232439;
  margin-bottom: 2rem;
  padding: 4rem 2rem;
  text-align: center;
}
.header a {
  margin-top: 1rem;
  display: block;
  color: #6ddce5;
  font-size: 0.85rem;
  text-decoration: none;
}

.header__title {
  margin: 0;
  color: #fff;
  font-weight: 300;
}

.block {
  width: 300px;
  margin: auto;
  padding: 4rem 2rem;
  display: block;
  color: #000;
  text-align: center;
  transition: background-color 0.3s ease-in-out;
}

Comments