Responsive Design

CSS Responsive Design examples

by rsmclaug

HTML

<!-- 
@media query allows us to more easily adapt to different browsers/devices/bandwidth

Create fluid websites, make for a better experience

Responsive design doesn't just mean accomodating mobile sites, but also wide or large screens

Concept can be applied to text, images and videos (see http://fitvidsjs.com/ and http://fittextjs.com/ for jQuery plugin examples)

Different Media Queries: http://www.w3.org/TR/css3-mediaqueries/#media0

Awesome example site: http://mediaqueri.es/

Data table example: http://css-tricks.com/examples/ResponsiveTables/responsive.php

-->

<!-- CSS3 ANIMATION EXAMPLE -->

<!--
<div id="greenBox">
    Animation Box!
</div>
-->

<!-- RESPONSIVE EXAMPLE -->

<!--
<div id="responsiveBox">
    Responsive Box!
</div>
-->
    
<!-- MOBILE ORIENTATION EXAMPLE -->

<!--
<p id="landscape">
    Landscape!
</p>

<p id="portrait">
    Portrait!
</p>
-->

CSS

/* -- CSS3 Animation -- */

#greenBox {
    width: 150px;
    height: 150px;
    background: green;
    -webkit-transition: width 1s, height 1s, padding 1s;
}

#greenBox:hover {
    padding: 2em;
    width: 200px;
    height: 300px;
    -webkit-transition: width 2s, height 4s, padding 3s;
}

/* -- Responsive Design using CSS3 -- */

#responsiveBox {
    -webkit-transition:background ease 2s;
    width: 150px;
    height: 150px;
    border: 1pt solid black;
    margin: 10px 0;
}

/* up to 500px */
@media (max-width: 500px) {
    #responsiveBox {
        background: red;
    }
}

/* up to 300 px, order of these matters */
@media (max-width: 300px) {
    #responsiveBox {
        background: blue;
    }
}

/* -- Mobile Orientation Example -- */

#landscape, #portrait {
    background: white;
    border: 1px solid black;
    width: 150px;
    height: 150px;    
}

@media (orientation: portrait) {
    #portrait {
       display: block; 
    }

    #landscape {
       display: none; 
    }
}

@media (orientation: landscape) {
    #landscape {
       display: block; 
    }

    #portrait {
       display: none; 
    }
}