Media Queries Explained – Kind of…

I am going to try to explain this.

Example One: @media (max-width:768px){color: font-weight: etc.}

Example one is saying for a window with a max-width of 768px use all style that fall under this query. At that size you would be talking about anything smaller than a desktop screen in most cases.

Example Two: @media screen and (max-width:768px){color: font-weight: etc.}

Example two is saying for a device with a screen and a window with max-width of 768px apply these styles. These two are almost identical except you are specifying screen as opposed to the other available media types the next most common one being print.

Example Three: @media only screen and (max-width:768px)

This is a quote directly from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

As there is no such media type as “only”, the style sheet should be ignored by older browsers.