Difference between revisions of "Courses/Jouw Site op Kleine Schermpjes"

From Publication Station
Line 1: Line 1:
=== Responsive Webdesign ===
= Responsive Webdesign =
 
 
=== Steps for graceful degradation: ===


==== 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 reposition or hide content'''
'''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: auto;
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;
	}
}
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Jouw_Site_op_Kleine_Schermpjes&oldid=237’