Enter CSS Media Queries in Chrome Developer Tools

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; }
}

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.