CSS3 Media Queries

There are several media types all braille embossed handheld print projection screen speech tty tv

Some print { body {font-size: 10pt;} screen { body {font-size: 13px;} screen, print { body {line-height: 1.0;} }

Why?

@media screen - establishing breakpoints There are no hard and fast rules! Some like to set the breakpoints based on the devices' resolution. E.g.: 320px for mobile, 768px for tablet, 1024px or higher for desktop. RWD is meant in an attempt to be future proof, so spending too much time focusing on present devices is not good practice DeviceResolution Mobile320px Tablet768px Desktop1024px

Example layout manipulated by media queries Layout container given a minimum and maximum width Interior components (children) are declared blocks {display: block} Example main content given 67% width and the sidebar 33% Media query instructs browser/device to display main content at 100% width and sidebar 100% width The result is that the sidebar folds beneath the main content 67%33%100%.content { width: 67%; }.sidebar { width: 33%; screen and (max-width: 768px) {.content { width: 100%; }.sidebar { width: 100%; }

Add to element

Launch Responsive website Establish Breakpoints Insert media queries appropriate to your design Add Viewport Meta Tag LAUNCH!

Fallback

Javascript : wp_enqueue_scripts <?php add_action( 'wp_enqueue_scripts', 'jmd_enqueue_lt_ie9' ); function jmd_enqueue_lt_ie9() { global $is_IE; if ( ! $is_IE ) return; if ( ! function_exists( 'wp_check_browser_version' ) ) include_once( ABSPATH. 'wp-admin/includes/dashboard.php' ); $response = wp_check_browser_version(); if ( 0 > version_compare( intval( $response['version'] ), 9 ) ) wp_enqueue_script('responsive', get_stylesheet_directory_uri(). '/js/responsive.js', array(), "1.0", false ); }

Links JSFiddle