Tuesday, April 27th, 2010 | Adventures, Tips, Web Dev

Using CSS Media Queries

I wanted my website to be a little easier to read in the iPhone. I knew there was a new CSS3 property called Media Queries. This allows you to discriminate based on window size. So, in the header, as I would normally pull in a stylesheet, I can say:

And that will pull in a stylesheet for the iPhone, mine looks like this:

#content-right {
display: none;
}
#pagewrapper {
	width: 640px;
}

So, in an iPhone at this moment, my site looks like this:

It really is that easy. I hope to share more about CSS Media Queries in the future.

Filed Under: Adventures, Tips, Web Dev

No Comments yet

Leave a Comment