Part 1

Initially you need to set  the viewport, this makes the page fit a screen’s width that is in device independent pixels (DIPs). It’s basically a theoretical screen. The net effect will be  a page  that can flow to fit different screen sizes such as a  tablet or a PC monitor.

<meta name="viewport" content="width=device-width, initial-scale=1">

The attribute “initial-scale=1” sets up a 1:1 relationship between CSS pixels and DIPs This means when the website page orientation changes on a mobile device, the layout can take advantage of the full landscape width.