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 `` element of your webpage. ```html ``` **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 ``` ``` 2) Meta tag property to allow user to zoom webpage ("0" or "no") ``` ``` 3) Apply screen/device specific stylesheet. ``` ``` 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; } } ``` 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

How to make webpage responsive ? 📱💻🖥️

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