h94vag
Last Updated: February 25, 2016
·
1.049K
· fernandoperigolo
7dedb03c52d9b14738f844c799b2dbc4

What is the current Media Querie?

First, add this markup in your core layout:

<div id="media"><strong>Media:</strong> </div>

In your CSS, insert the style for the container that will show the current media. Something like this:

#media{
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5rem;
  strong:after{
    content: ' No media';
  }
}

Now, only thing you have to do is add names for the medias. Like this:

@media only screen
and (min-width : 1824px) {
  #media strong:after{
    content: ' Large screens';
  }
}

or/and

@media only screen
and (max-width : 767px) {
  #media strong:after{
    content: ' SmartPhones';
  }
}

The result

You will see a tip at bottom right of the page. Like this:

Picture

Say Thanks
Respond

1 Response
Add your response

10509
Ccf764182e6d167b808278c1fca951c9

Nice idea!
For all you lazy guys: https://github.com/TheBenji/which-media-query


Just add this line in your header:
<link type="text/css" rel="stylesheet" href="//rawgithub.com/TheBenji/which-media-query/master/media.css">

over 1 year ago ·