Responsive web design

This week, i am gonna learning some responsive we design.

Firstly, what is the responsive

In plain English, when users is visiting website by different device, like laptop, phone, the website could appear perfectly in different size of screen or landscape.

The most important elements are :

       1. fluid grid
       2. flexible images
       3. media queries

1. First fluid grid

1. using media queries. to set screen size clearly.
2. set other element size into keyword, percentage, em.(about em is important
here is one blog to explain: http://alistapart.com/article/fluidgrids)

Here is one example,

https://www.youtube.com/watch?v=dwxtjbYNF_8

In this example, it includes:

 one container called wrapper: using media queries to set different size for different screen

other elements in the wrapper: using percentage(according to container size).

Another example,

http://alistapart.com/d/fluidgrids/examples/grid/final.html

(explain later..)

3. media queries

How to specify media dependencies for style sheets:

1.In style sheet

or

in @media rule,

2. In HTML(link)

secondly,some terminology,

1. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

media type word,

braille

embossed