As I advanced through the course, I learned that these units made all the
difference to the webpage’s response in different screen sizes. My code
reviewers would tell me to adjust my webpage because it looked different when they were viewing it.
When I started having these issues, I made a lot of research on the subject,
but I was still a little confused about it. This article’s goal is to create a
simple and direct rule to achieve the required responsiveness any developer needs in their code.
Why Make Your Webpage Responsive?
Right now, I am using a Lenovo Ideapad S145 to write
this article, it has a screen size of 15.6” and the Hackernoon webpage looks
Now, I was reading an article there, when my Windows Update started (can we control it?), so I had to switch to my mobile to continue reading it. I have a Motorola G7 Plus, with a screen size of 6.2”, this is how the same webpage looks like in this device:
Did you see the difference? Hackernoon’s webpage is responsive enough to change the position and appearance of each section when the screen size changes. You can see those changes by zooming in and out on your PC while looking at their webpage.
Solutions For Our Problems
this article, I’m going to focus on two of them:
• Relative units (rem, em, and percentage);
• Media queries.
Relative Units vs Fixed Units
the images below show why.
In this image, we have a maximized window showing two boxes, I used pixels in the top one and percentage in the bottom one. Now, let’s see what happens when I shrink the screen size of my browser.
This is the first solution on making your webpage more responsive, but we are not quite done yet, we can improve our projects even further, take a look at the next section!
Now let’s say you have a horizontal navbar in a webpage that has a 1024 px width on an 1440 px laptop, when you look at the page it is fine, you can read anything written in the navbar and it’s very easy to navigate through it:
But, if I switch to my mobile (width: 375px), look at what happens when we don’t use media queries:
If you want to see the results of your work with ease, you can use Google
Chrome’s Developer Tools and access the Device Toolbar where you can play with the window’s width and see how the changes are applied in each media query breakpoint.
This article shouldn’t be your only source of information, you should take a
look at the links I provided and make some more research before jumping into your project. And never do it like Peter Griffin. Happy coding!