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">
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;
}
}
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;
}
}
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
Top comments (0)