Question

Is there a way to, for example, change the background colour when the browser is dragged to a certain size (say 200px x 200px). I’ve got it to work when it’s 200 width OR 200 height, but I want it to be so that it only changes when the browser is 200 width AND 200 height. How can I combine the two queries so that it’s not an either or, but an and.

here’s the code, I need to combine them into 1 query that works when BOTH demands are met.

@media screen and (max-height: 500px) and (min-height: 490px) {
    p{
        color: red;
    }
    body{
        background-color: blue;
    }
@media screen and (max-width : 300px) and (min-width: 290px) {
    p{
        color: yellow;
    }
    body{
        background-color: green;
    }

Hope that’s clear,
Many thanks in advance

Answer 1

Yes you can. You have to combine the queries with and. I’ve created a fiddle for you here http://jsfiddle.net/HChTD/

Update

Here is the between a range example: http://jsfiddle.net/HChTD/1/