HTML Responsive Webpage

Written by

Aayushi Bansal

HTML responsive means adjusting the style of a website automatically so that it looks good on all devices.

In other words, responsive web design is about using HTML and CSS to automatically hide, shrink, resize or enlarge a website to make it look good on all devices like desktops, tablets, and phones.

When making responsive web pages, the following meta tag needs to be added to the webpages:

<meta name=”viewport” >

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

 

Responsive text-size:

The size can be set with a “vw” unit, which means the viewport width. That way the text size will follow the size of the browser window.

For example:

<p style=”font-size:5vw”>paragraph</p>

 

Responsive images:

If CSS width property is set to 100%, the image will be responsive.

For example:

<img src=”1_jpg” style=”width:100%;”>

There is also a property called max-width in which if max-width is set to 100%, the image will scale down if it has to but never scale up to be larger than its original size.

For example:

<img src=”1.jpg” style=”max-width:100%;”>

 

Responsive web design- Frameworks:

There are many existing CSS frameworks that offer responsive design.

Using Materialize CSS-

A great way to create a responsive design is to use a responsive style sheet like Materialize CSS.

Bootstrap-

Another popular framework is bootstrap. It uses HTML, CSS and jQuery to make responsive web design.

 

HTML Responsive Webpage