Best Responsive Web Design Practices to follow.
π§΅π
π§΅π
1β£ Set The Viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
π
<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.
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π
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.
π
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.
π
https://twitter.com/ravikmmr/status/1488914316791214082
5β£ Use Relative units
Don's use standard px unit. always prefer rem,%, em, etc.
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.
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.
π
If you find it useful. Give the first one a retweet and if you have any feedback, let me know in the comment.
π
https://twitter.com/ravikmmr/status/1491734454125359104
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
