What is Responsive Design? Explain the components that make responsive web design. Why its important ? explain in detail.

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size.

Components of Responsive Web Design (RWD):-

• Setting The Viewport

  To create a responsive website, add the following <meta> tag to all your web pages:

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

          This will set the viewport of your page, which will give the browser instruction on how to control the page's dimensions and scaling.

• Responsive Images

  Responsive images are images that scale nicely to fit any browser size.

   To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.

• Media Queries

  In addition to resize text and images, it is also common to use media queries in responsive web pages.

  With media queries you can define completely different styles for different browser sizes.

• Responsive Text Size

  The text size can be set with a "vw" unit, which means the "viewport width".

Share:   

   Raj Kumar
Computer Science And Engineering