What is Responsive Web Design?

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Cheat Sheet
Using the responsive web design cheat sheet is very simple.Find the device you’re designing for on the chart and read what breakpoint dimensions it should have – and there you have it.

responsive-cheat-sheet
Source: http://blog.uxpin.com

Media Query
The @media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media queries.

Media queries look at the capability of the device, and can be used to check many things, such as:

  • width and height of the browser window
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution
  • and much more

Syntax

@media not|only mediatype and (media feature) {
CSS-Code;
}

You can also have different stylesheets for different media:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">



Leave a Reply

Your email address will not be published. Required fields are marked *