There are a few CSS grid/boilerplate systems that use a fluid grid to create a responsive design down to mobile using media queries. I've used a few of them for some projects, and they work very well, although they require a lot of tweaking depending on the device you are using.
Inuit CSS:
http://csswizardry.com/inuitcss/
Skeleton (my favorite)
http://getskeleton.com/
1140 grid system:
http://cssgrid.net/
They all seem to work in about the same way. When the screen resolution hits a certain point, all of the divs of the grid become the same size and stack on top of each other.
Tablet Portrait: Between 768px and 959px
All Mobile Sizes: Less than 767px
Just Mobile Landscape: Between 480px and 767px
Just Mobile Portrait: Less than 479px
Using media queries, you can add appropriate backgrounds/sectors/etc for all of the sizes.
It is a very interesting way to design once and create a cohesive experience across all of the platforms.
No comments:
Post a Comment