Question

Whatever screen is being used to view the page, I would like to show as many tiles as possible. Different scenarios include:

• Mobile browswer (iPhone, Android)
• iPad or Android Table or Kindle Fire
• Narrow Browser window (safari, chrome, ie, firefox, operta, etc)
• Full screen Browser window

One solution I thought of was to use 960.gs and adaptive.js … however, when I set the size of the div, for example:

div class=”tile grid_4″

I noticed that adaptive.js would resize the tile (becase the different .css files resize the columns)… However, I need to keep a fixed tile size (310px X 450px)….

Perhaps I need to dynamically rename the div class so that the # of columns x col width = 310px?

One site that does this is http://pinterest.com

And to see what each tile looks like, please check out http://jsfiddle.net/hagope/76jjp/

Answer 1

Have a look at CSS3 media queries. I recommend you read A List Apart’s fantastic article on Responsive Web Design, which covers the subject and is a good starting point.

After you’ve got the basics sorted, you can target specific devices using the device-width query. To target high-density displays (e.g. the iPhone4’s retina display) you can look into the device-pixel-ratio query.

Hope this helps.