HTML Responsive Webpage
Written by
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.
A great way to create a responsive design is to use a responsive style sheet like Materialize CSS.
Another popular framework is bootstrap. It uses HTML, CSS and jQuery to make responsive web design.
