A Pen by Fernando Agüero.

Color-Queries.markdown

Color Queries

Curious as to how the browser would react to several hundred media queries, I decided to create this experiment.

In order to demonstrate each individual media query, I found a list of over 1,000 unique colors to use to apply a unique background color to each media query. To make sure the text color is readable on top of any given background color, I used Sass to return the complementary color of the background color. I had to compile my Sass locally because it was too big of a task for CodePen to handle. So, the CSS you see here is what was compiled on my machine and copy/pasted into this Pen.

The first media query kicks in at min-width: 320px, and each new media query thereafter increments by 1px. This continues all the way up to min-width: 1400px.

Resize your the preview window and watch the colors change as the media queries kick in!

WARNING: Use at your own risk

A Pen by Fernando Agüero on CodePen.

License.

index.html

<div class="text-container">
  <h1>Color <br />Queries</h1>
</div>

style.scss

@import "compass";
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-size: 30px;
  background-color: #bdc3c7;
  color: #7f8c8d;
}

.text-container {
  position: relative;
  width: 100%;
  height: 100%;
}

h1 {
  position: absolute;
  text-align: center;
  margin: 0;
  margin-top: -1em;
  top: 50%;
  width: 100%;
  font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 0.75;
  letter-spacing: -0.08em;
}

h1:after {
  content: '⇠make your window larger than 320px⇢';
  display: block;
  clear: both;
  margin-top: 1em;
  font-size: 30%;
  letter-spacing: -0.075em;
  opacity: 0.6;
  white-space: nowrap;
}

@media (max-width: 320px) {
  body {
    font-size: 20px;
  }
}

@media (min-width: 480px) {
  body {
    font-size: 40px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 60px;
  }
}

@media (min-width: 992px) {
  body {
    font-size: 80px;
  }
}

@media (min-width: 321px) {
  h1:after {
    content: '⇠ resize your window ⇢';
  }
}
@media (min-width: 1401px) {
  h1:after {
    content: '⇢ make your window smaller than 1400px ⇠';
  }
}

@for $i from 320 through 1920 {
@media (min-width: ($i * 1px)) {
  body { 
    $bg-color: rgb(random(255),random(255),random(255));
    background-color: $bg-color; 
    color: complement($bg-color);
    } 
  
  }
}