Responsive web design

Responsive Web Design

, Responsive Web Design - Introduction



What is Responsive Web Design?
• Responsive web design makes your web page look good on all devi

• Responsive web design uses only HTML and CSS.

• Responsive web design is not a program or a JavaScript.




Web pages can be viewed using many different
devices: desktops, tablets, and phones

, Responsive Web Design - The Viewport



• What is The Viewport?
• The viewport is the user's visible area of a web page.
• The viewport varies with the device, and will be smaller on a mobile p
than on a computer screen.
• Setting The Viewport
• HTML5 introduced a method to let web designers take control over th
viewport, through the <meta> tag.
• You should include the following <meta> viewport element in the <he
section of all your web pages:
• <meta name="viewport" content="width=device-width, initial-scale=1.0"

, Responsive Web Design - The Viewport




• This gives the browser instructions on how to control the pa
dimensions and scaling.

• The width=device-width part sets the width of the page to fo
the screen-width of the device (which will vary depending on
device).

• The initial-scale=1.0 part sets the initial zoom level when the p
is first loaded by the browser.