Responsive Website Design

A responsive website design 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.This syntax will be:

Statement
  <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.

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

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.

General Syntax

    <source srcset="https://picsum.photos/seed/picsum/200/300" media="(max-width: 600px)" />
<br />
<source srcset="https://picsum.photos/seed/picsum/200/300" media="(max-width: 1500px)" />
<source srcset="https://picsum.photos/seed/picsum/200/300" />
<img src="https://picsum.photos/seed/picsum/200/300" alt="random images" />    
   

Source Code

      
        <source srcset="https://picsum.photos/seed/picsum/200/300" media="(max-width: 600px)" />
<br />
<source srcset="https://picsum.photos/seed/picsum/200/300" media="(max-width: 1500px)" />
<source srcset="https://picsum.photos/seed/picsum/200/300" />
<img src="https://picsum.photos/seed/picsum/200/300" alt="random images" />      
    

Source Code: Output


random images

Code Explanation

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

Responsive Website Design
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS