Responsive Website Design

A responsive website adjusts itself according to the device and looks good on all the devices such as desktop, mobile, and tablets. The responsive website follows the media query rule according to the available viewport.

How To Detect Device View Port

To give the viewport information to the browser, a meta tag is used. The syntax will be This meta tag provides viewport information to the browser and then the browser adjusts the website according to the written media query for this specific device. Please note that without this meta tag, responsive features can not achieve precisely.

How to make responsive image

Responsive Image

Responsive images scale themselves up and down according to the device. Responsive image can be created by setting image width to 100%;

Using the max-width Property

Setting image max-width to 100%, causes a problem in scaling up the image while as scale-down of the image works properly.

Responsive Text Size

Responsive text can be made by providing font-size value to viewport with. In general 1vw = 1% of viewport width.

Showing different images depending on browser width

THE HTML elements provides facility to set images with respect to device width.

Resize the browser and then see the image that will be change according to device width.

<picture>
  <source srcset="facility.jpg" media="(max-width: 600px)">
  <source srcset="img_facility.jpg.jpg" media="(max-width: 1500px)">
  <source srcset="facility-pic.jpg.jpg">
  <img src="img_facility.jpg.jpg" alt="Flowers">
</picture>

Media Queries

Media query provides features to write CSS code according to device with and make the website device friendly means responsive. These features really extend website performance and visibility score.