When smartphones started becoming household items, most websites were not ready to be viewed on small screens. You had to scroll sideways to view the whole website. Then came the meta viewport element which shrinks down the size of the content to the device-width.
The meta tag always comes inside the head tag:
<meta name="viewport" content="width=device-width" initial-scale="1.0">
Viewport is the total area of the webpage that you see, which varies with the device. The width of the content is set to the device-width to shrink the whole website to your device screen. And in the end we are telling the browser to show the initial-scale or the zoom level of your webpage when its first viewed.
It solved the problem but not completely. Everything is now squeezed in that small screen. The size of texts and links will now be too small to be seen and different section may overlap.
What these websites needed was a structure to fit them in every screen. Many solutions were developed, but it became an integral part of the web development when Ethan Marcotte joined these solutions and coined the term Responsive Web Design. The three main ingredients of the Responsive web design are:
1. Flexible Grid,
2. Flexible images and media,
3. Media queries
Before diving into these, lets start small. If you are building a static website, you can just add a few CSS attributes to make your website responsive.
Lets meet some of these attributes:
1. Responsive Fonts
We usually use pixels to define the font size. To make the fonts responsive, we are going to use ems which are relative units. First lets set the base font size.
body {font-size: 100%}
If you know the font-size of the desired element in pixels, it can easily be converted to em using the following formula:
target ÷ context = result
So, you have to divide the target font size by the font-size of the containing element or context. For example, if the heading is 24px and your main content is 16px, you can calculate their relative size as follows:
24 ÷ 16 = 1.5
Now put this in your stylesheet.
h1 {font-size: 1.5em};
Similarly, to calculate the relative font size of the content, divide the font size by the size of the heading:
16 ÷ 24 = 0.6666666666666667
You can easily copy this value in your CSS without rounding the value. Your browser will admire you for this precision.
p {font-size: 0.6666666666666667em;}
2. Responsive Images
Waiting for us next are the images. To make them responsive, you can simply add the following code in the stylesheet:
img {width: 100%;}
So, the images will now change their size to fit in the screen they find themselves in.
And now your website will feel as comfortable in a smartphone screen as it does on the desktop screen.
