How are these two sites built to be 'responsive'?
I am looking into responsive web design and have come across many methods of doing so, however I am struggling to distinguish the best method of doing so.
I -really- like the how these two sites work:
- http://paulrobertlloyd.com/
- http://colly.com/
However I cannot seem to figure out how the are dynamically changing their layouts. Is there a technique I am missing that is not listed below?
So far I have come across the following methods:
1: Javascript
Example - adapt.js
Detects the screen resolution dynamical开发者_StackOverflow社区ly and selects the appropriate stylesheet.
2: CSS3 Media queries
Using a technique like:
@media only screen and (max-width: 480px) and (min-width: 320px) {
}
3: Backend
Example - Prepending PHP files
Only really works for a single mobile version of a site, mirroring the original domain and changing the headers.
Both of those websites use media queries, as you can see in the bottoms of their respective CSS files.
This is generally referred to as elastic CSS.
There is a framework for it here: http://elasticss.com/ I should say though that I have never used it personally, so there might be something better.
精彩评论