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.
