<h2>So wird es richtig gemacht!</h2>
<p>Das ist ein Besipieltext. Media Queries: Ahoi!</p>
/* Source Sans Pro */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body {  
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;}

h2 { font-size: 8vw }
p { font-size: 5vw; }

@media ( orientation:landscape ) {
	h2 { font-size: 4vmax }
	p { font-size: 2.2vmax; }
}

@media ( min-width: 680px ) {
	h2 { font-size: 3vmax }
	p { font-size: 2vmax; }
}

@media screen and ( min-width: 1024px )  {
	h2 { font-size: 5em }
	p { font-size: 1.3em; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.