Responsive webdesign with css3

This is a simple example of responsive design with css3.

by scurrilus

HTML

<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--ende powered by SCURRILUS-->

<div class="code">
    <div class="myContent">
    <img src="http://www.bimmertoday.de/wp-content/uploads/BMW-Art-Car-Alexander-Calder.jpg" alt="car"/>
    <h1>This is a H1 Headline</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>

CSS

/*global definition of stylesheets*/

h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.myContent {
    padding: 10px;
    background: #ccc;
    clear: both;
}

.myContent p {
    font-size: 16px;
}

.myContent img {
    width: 220px;
    float: left;
    margin-right: 10px;
}

/*special definition for max-screen width 640px*/
@media only screen and (max-width: 640px) {
    h1 {
        font-size: 18px;
        padding-top:20px;
    }
    
    .myContent {
        padding: 10px;
        background: #f2f6de;
    }
    
    .myContent p {
        font-size: 14px;
        color: #0c1c67;
        float: none;
        margin-right: 0px;
    }
    
    .myContent img {
        width: 100%;
        float: none;
        margin-right: 0px;
    }
}

/*special definition for max-screen width 480px*/
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 16px;
        padding-top:0px;
    }
    
    .myContent {
        padding: 10px;
        background: #f6f6f6;
    }
    
     .myContent p {
        color: #666666;
        font-size: 12px;
    }
    
    .myContent img {
        display: none;
    }
}

JavaScript

// For this example, no javascript is required.

// Resisize the preview window on the right.

// With the css3 tag @media in conjunction with "max-width" we can very easy implement a reponsive design. No "!important" is required. @media overrides the global definitions for a given screen width.