Courses/Jouw Site op Kleine Schermpjes
From Publication Station
Revision as of 17:38, 7 January 2015 by Arjensuijker (talk | contribs)
Responsive Webdesign
Steps for graceful degradation:
1 Set the initial scale:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
2 Use CSS media queries to hide unnecessary content
There's less space on smaller screens, so you'll want to hide things like footers and decorative elements.
@media screen and (max-width: 560px) { #footer { display:none; } }
3 Use CSS media queries to arrange your content into relatively positioned blocks
On bigger screens, you can easily have multiple blocks of content next to each other. If the screen is smaller however, this gets more difficult. On medium sized screens this can be solved by making the blocks narrower. But if the screen is really small, you'll have to stack all blocks vertically:
@media screen and (max-width: 400px) { #block { width:100%; float:none; } }