##Responsive Web Page

What is responsive? The definition of responsive web design has three essentials:

  • Fluid Grid
  • Flexible Images
  • Media Queries

The first two essentials are to get relative units like percentage rather than absolute pixels or points. It calls for page element sizing which will fit in with all the size of page size. To calculate the relative units, finding the pixels or points of the target and context(usually it is the parent element of the target), use the following formula.

target Ă· context = result

Media Queries are used to look at the capability of different devices.

###Flexible Grid

Although the concept of responsive does not point out flexible font, it is very important to use flexible font for the web design. You can treat font as a character image, or vice versa. Then what you can do is to make font/image to change size depends on context.

####Flexible Font To make font flexible, just use em/rem as unit of font-size.

h1 {
  font-size: 2em;
}

####Fluid Grid There are many grid systems to help building responsive web page. Although different grid systems might use different break points, the concept and way to use fluid grid is same. If the page is simple, you can define the grid system by yourself.

  • change pixel to percentage
  • grid system

###Flexible Images We want the image to be smart as well.

img {
  max-width: 100%;
}

###Media Queries

####Media type all, screen, print… There are two ways to define or import media type.

<link rel="stylesheet" href="style.css" media="screen">
@media screen {}

####Media query Define the style you need to overwrite inside the media query.

@media only screen and (max-width: 640px) {
  img {
    max-width: 100%;
  }
}

####Viewpoint The screen width and device width is not always the same.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

####Retina Usually need to consider of the width and image size for retina device.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {}

##Reference

###Readings

responsive-web-design

###Tools