How to make webpage responsive ? 📱💻🖥️
Tags: responsive, frontend, webdev, beginners
Published: 2023-06-20 18:27:29

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.

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
**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:
```css
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  body {
    color: blue;
  }
}
```
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;
  }
}
```

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">
```
2) Meta tag property to allow user to zoom webpage ("0" or "no")
```
<meta name="viewport" content="width=device-width, user-scalable=0">
```

3) Apply screen/device specific stylesheet.

```
<link rel="stylesheet" media="screen and (min-width: 480px)" href="mobile.css">
```
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) {}
```

6) Target height to detect screen size.

```
@media screen and (min-height: 350px) {
  body {
    color: yellow;
  }
}
```

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;
  }
}
```
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6imhe4vhj9kq57i6cgt.png" width="200" alt="done" loading="lazy">

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 <a href="https://unsplash.com/@domenicoloia?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Domenico Loia</a> on <a href="https://unsplash.com/photos/EhTcC9sYXsw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>