Responsive Web Design and em and rem css size units in CSS
The Blog talks about Responsive Web design for websites and when to use em and rem .
What is Responsive Web Design?
In the early days of web design, the websites are made in the one resolution that is desktop size. And if a client demands to make it responsive for mobile they have to pay the extra charges to the developer. But in the modern era daily new mobile, laptop and desktop launch in different sizes and in different resolutions. So it's compulsory to make a website Responsive and the website should support every screen layout.
Responsive web design is a necessity in today's time.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
When the word Responsive comes, the newbie developer gets scared that how the website will be responsive. But to make a Website Responsive is very easy in this modern era because of too much advancement in the technological world.
Below are some ways to make a Website Responsive.
- Setting up the viewport.
- Using max-width or max-height.
- Using Media Queries.
- By Using em/rem/vh/vw units over pixels.
So in this blog, we will discuss when em and rem use units over pixels to make the website responsive.
- em over pixels:
A CSS unit that is relative to the font size of the parent element.
em gives the ability to control an area of a design using its parent element. em is a flexible, scalable unit that is translated by the browser into pixel values.
If we take 1em means 1 time of parent element font size. If we take 10em means 10 times of parent element font size.
We will understand this by below code snippets.
.container{
font-size: 12px;
}
p{
font-size: 2em;
}
In the code snippets, the .container is the parent element and the p tag is its child element. The parent element .container has the font-size 12px and the child element p has font-size 2em. So the child element font size converts to 24px because 2 em means two times the parent element so 2*12=24px.
- rem over pixels:
A CSS unit that is relative to the font size of the HTML element means root element.
rem gives the ability to scale type across the entire page easily. rem is also a flexible, scalable unit that is translated by the browser into pixel values.
If we take 1rem means 1 time of root element font size. If we take 10rem means 10 times of root element font size.
We will understand this by below code snippets.
html{
font-size: 16px;
}
.section{
font-size: 3em;
}
In the code snippets, the html is the root element, and the .section tag is the element of the HTML page. The root element has the font-size 16px and section element has font-size 3rem. So the section element font size converts to 48px because 3 rem means three times the root element so 3*16=48px.
To know more about em and rem you can refer this guide
That's it from my side. Hope you liked it. For more blogs you can follow me on Hashnode
Reference for this blog is from the youtube video that I came across yesterday and also from MDN Web Docs