Three steps to implementing a responsive web design through CSS3

How to implement responsive web design with CSS3:

It is divided into three steps:

(1) Allow Web page width to be adjusted automatically.  First in the page header, we need to add this line: <meta name= "viewport" content= "width=device-width, initial-scale=1"/> Viewport is the default width and height of the Web page, the width of the page defaults to its own screen width (width=device-width), and the original scale (initial-scale=1) is 1.0, which is the initial size of the page that occupies 100% of the screen area.

(2) Flow layout. Do not use absolute width layout and font size, that is, in the code in CSS, the definition width and height can not use PX (WIDTH:PX) can only use the percentage (width:%) or (Width:auto) defined high width. The definition font size also uses relative units (EM) and does not use absolute units (px).

(3) Media query @media only screens and (MAX-WIDTH:PX) Max-width is executed when the screen is less than or equal to how much (Min-widt) is when the screen is greater than or equal to how much.

Three steps to implementing a responsive web design through CSS3