HTML Responsive Web Design

HTML responsive web design adjusts itself according to the device and looks good on all the devices such as desktops, mobiles, 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.This syntax will be:

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

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. A responsive image can be created by setting the image width to 100%.

Using the max-width Property

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

Responsive Text Size

Responsive text can be made by providing font-size values to the viewport width.

In general 1vw = 1% of viewport width.

<h2 style="font-size:10vw">Hello World</h2>

A Responsive website adjusts itself according to the device viewport width and looking good on all the devices.

Showing Different Images Depending on Browser Width

The HTML <picture> elements provide the facility to set images with respect to device width. Resize the browser and then see the image that will be changed according to the device width.

Source Code

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

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.

Online Test / Quiz

Web Tutorials

HTML Responsive Web Design
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4