By adding <head> element to the page tell the browser that we know what we’re doing.
we need to use the meta viewport value width = device-width, which instructs the page to match the screen’s width in device independent pixels. this allows the page to reflow content to match the screen sizes.
Adding the attribute initial-scale = 1 instructs the browsers to establish a one to one relationship between device independent pixels and CSS pixels
<meta name="viewport" content="width=device-width,inital-scale=1.0" > !IMPORTANT : DONT FORGET TO ADD THIS CODE WHEN U DO RESPONSIVE WEBSITE.
CSS pixels are what we’re used to working with most of the time, and its only one we should worry about. with initial-scale = 1 some browsers will the page width constant when rotating to landscape mode. They also scale the content rather than allowing it to reflow.