TheLazy.Dev
Portfolio GitHub

Blog

responsive |frontend |webdev |beginners

How to make webpage responsive ? 📱💻🖥️

aniketmde

Aniket Deshbhratar

Posted on June 20, 2023

How to make webpage responsive ? 📱💻🖥️

Here are a few key points to consider when developing a responsive webpage 👨‍💻

1.Use meta tags ☝️:
This is very important to include meta tags in the <head> element of your webpage.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

What is viewport 🤔?
The viewport is the visible area of a webpage on a display device.

Why we have to declare width and initial scale for content 🤷‍♀️?
Declaring the width and initial scale is important to instruct the browser on how to handle the content.
- Width: Specify that the content should have the same width as the current screen, similar to using 100vw.
- Initial scale: Set the zoom level of the webpage to the default, adjusting the content to fit within the screen during the initial load and also preventing zooming the page.

2.Use dynamic units 🔢:
Avoid using pixel (px) values. Instead, consider using percentage (%) values for width and height. You can also use relative units like 'em' or 'rem', which adapt better to different screen sizes.

3.Media Queries 📳:
Media queries are where the real magic happens. They allow you to override the CSS styles based on specific conditions, such as the width of the screen.

For example:

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  body {
    color: blue;
  }
}
Enter fullscreen mode Exit fullscreen mode

This media query will apply the color blue to the body when the screen width is between 1025px and 1200px.

Media queries can also target specific orientations or media types.

@media screen and (orientation: landscape) {
  body {
    color: blue;
  }
}
Enter fullscreen mode Exit fullscreen mode

by using this we can target mobile, tablet landscape and portrait orientation.

Most used media queries breakpoints :
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV

Note: Best practice to use media queries is to write at the bottom of stylesheet.

4.Responsive images 🍀 :
To make images responsive, use CSS rules. Set the max-width of the image to 100% and keep the height as auto. This allows the image to scale proportionally and fit within its container.

Using modern CSS layout properties such as flexbox and grid makes it much easier to create responsive elements.

Yeah 🥳🥳🥳
That's all you need to make your webpage responsive :)
So go ahead and make your webpage responsive and enjoy the benefits of a great user experience across different devices and screen sizes! 🎉🌟

Additionally, here are some extra points to consider 🤠 :

1) Height specific Viewport meta tag

<meta name="viewport" content="height=device-height, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

2) Meta tag property to allow user to zoom webpage ("0" or "no")

<meta name="viewport" content="width=device-width, user-scalable=0">
Enter fullscreen mode Exit fullscreen mode

3) Apply screen/device specific stylesheet.

<link rel="stylesheet" media="screen and (min-width: 480px)" href="mobile.css">
Enter fullscreen mode Exit fullscreen mode

4) @media types
all — for all media types.
print — printable css style.
screen — for computer screens, tablets and, smart-phones.
speech — this will help screen readers reads all punctuation out loud.

5) Target multiples screen using "comma"
//device width between 320px and 480px OR above 1024px

@media screen and (max-width: 320px) and (min-width: 470px), (min-width: 1024px) {}
Enter fullscreen mode Exit fullscreen mode

6) Target height to detect screen size.

@media screen and (min-height: 350px) {
  body {
    color: yellow;
  }
}
Enter fullscreen mode Exit fullscreen mode

7) Media queries to target device using screen aspect-ratio.
calculation of the width-to-height aspect ratio of the viewport

@media (max-aspect-ratio: 3/2) {
  div {
    color: red;
  }
}
Enter fullscreen mode Exit fullscreen mode

done

Best place to learn flexbox :
https://flexboxfroggy.com/
https://www.freecodecamp.org/news/learn-css-flexbox/

Free Courses :
https://www.coursera.org/learn/responsive-web-design
https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

Photo by Domenico Loia on Unsplash

💖 💪 🙅 🚩
aniketmde
Aniket Deshbhratar

Posted on June 20, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to make webpage responsive ? 📱💻🖥️
responsive How to make webpage responsive ? 📱💻🖥️

June 20, 2023