Enter CSS Media Queries in Chrome Developer Tools

Question

Pressing F12 I can instantly change CSS of elements in Chrome. However, I can not input @media screen and (max-width) similar to here:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

When I press enter it simply disappears. What can I do to dynamically add and remove media queries?

Answer 1

When you edit the styles for a specific element in the inspector, it is as though you were editing the element's inline style attribute: you can only place property declarations such as color: red in your example. This is even reflected in the DOM visualization itself as you edit an element's styles. Media queries don't belong in inline styles, they belong in @media rules which appear only in a proper stylesheet.

On Chrome, you will need to edit the inspector stylesheet directly in order to include your media queries. You can reach it by going to the Sources panel and choosing inspector-stylesheet.

Since this involves writing CSS, you will need to select the element. You can (usually) get a unique CSS selector for the element you choose by right-clicking it in the Elements panel and choosing Copy CSS path.

Then just write your CSS:

@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}

Answer 2

You can use New Style Rule. Click on Plus symbol (+) besides .cls.

and then, you'll see it generates new class. Now click on inspector-stylesheet.

You will be redirect to Sources Tab with almost blank stylesheet. Now, you can put Media Queries in there.

Answer 3

You can always add the CSS within style tags in the head section. Just edit the HTML by right-clicking on the html and select "Edit as HTML". For example,

<style>
    @media screen and (min-width: 0px) and (max-width: 400px) {
        body {
            background-color: red;
        }
    }
    @media screen and (min-width: 401px) and (max-width: 599px) {
        body {
            background-color: green;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background-color: blue;
        }
    }
</style>