Comprehensive tutorial for @media Queries?

@PeterPan_321

Copy linkTweet thisAlerts:

Jul 14.2015

I’m tediously trying to learn all I can about responsive design. I had a frustration over the past week trying to get some basic @media queries to work, and it made me realize that good tutorials are few and far between. I have an iphone-4, whose browser window width in portrait mode is 320. So I created a simple media rule to test with, based on detecting that as a max width…

[CODE]<style>

body { background-color: #33cc99; }

@media screen and (max-width: 320px)
{
background-color: lightblue;
}

</style>[/CODE]

Sure enough, if I view this on Chrome or Firefox and shrink the window, the color will change when I cross the point where the width is 320. Trouble is, the iphone display would not switch to the lightblue color until I added something like this to the page.

[CODE]
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1″/>
[/CODE]

Now besides the obvious WHY question, the bigger concern is that it was only by looking into another problem (preventing form inputs and textareas from automatically zooming) that i even found this meta data insert. So if its also needed for media rules to work properly at all on an iphone, and no tutorial on media rules even mentions it, what hope do I have of ever learning to use these queries? Do androids require other “magic meta” inserts to follow media queries? I simply don’t have, nor can afford to get my hands on every mobile device out there, but i would like at least a fighting chance at learning methods that at least SHOULD work. Can anyone recommend any online references or tutorials that will at least give me a good foundation, without leaving out such critical “MUST DOs”?