Difference between revisions of "Courses/Jouw Site op Kleine Schermpjes"
From Publication Station
Arjensuijker (talk | contribs) |
Arjensuijker (talk | contribs) |
||
Line 1: | Line 1: | ||
=== | = Responsive Webdesign = | ||
=== Steps for graceful degradation: === | |||
'''1 Set the initial scaling:''' | '''1 Set the initial scaling:''' | ||
<nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki> | <nowiki><meta name="viewport" content="width=device-width; initial-scale=1.0"></nowiki> | ||
'''2 Use CSS media queries to | '''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. | |||
<nowiki>@media screen and (max-width: 560px) { | <nowiki>@media screen and (max-width: 560px) { | ||
#content { | #footer { | ||
width: | display:none; | ||
float: none; | } | ||
} | |||
</nowiki> | |||
'''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: | |||
<nowiki> | |||
@media screen and (max-width: 400px) { | |||
#block { | |||
width:100%; | |||
float:none; | |||
} | } | ||
} | } | ||
</nowiki> | </nowiki> |
Revision as of 17:09, 7 January 2015
Responsive Webdesign
Steps for graceful degradation:
1 Set the initial scaling:
<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; } }