Best Responsive Web Design Practices to follow.
🧵👇
1⃣ Set The Viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
👇
2⃣ Use the media queries.
This CSS property has a feature to enable your webpage content to adapt to different screen sizes.
3⃣ Design for mobile-first.
Today many users use mobile and open websites through mobiles, so your design must be started from the mobile then forward to tablet and PC.
Chrome responsive design tester👇
4⃣ Use SVG for icons
SVGs are vector-based, they can be scaled to any size without losing quality. With SVG, your graphics will always be sharp and pixel perfect.
Check this thread for SVG.
🔗
5⃣ Use Relative units
Don's use standard px unit. always prefer rem,%, em, etc.
6⃣ Understand the Layout.
Understand how to "display" property works.
Display: block, flex, grid, inline, inline-block.
7⃣ Use CSS Grid, Flex.
Thanks for reading the thread.
If you find it useful. Give the first one a retweet and if you have any feedback, let me know in the comment.
🔗
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.