Making a Responsive webpage can sometime go...
The goal of a Responsive web design is about making web pages look good on all devices.
A responsive web design will automatically adjust or adapt to different screen sizes and viewports.
In my little research to creating a responsive webpage,
I found some gems to help us create responsive designs😂😐
Responsive Website Design method using HTML
↓↓
1. Using the <meta>
tag
You can achieve responsiveness by adding <meta>
tag to all your html web pages.
The <meta>
tag forces the web page to follow the screen-width of the device.
This will set the viewport of your page. In order words, it'll give the browser instructions on how to control the page's dimensions and scaling.
↓↓
2. Using the <picture>
tag
If the CSS width property is set to 100%, the image will be responsive and scale up and down.
That is, If the image max-width is at 100%, the image will scale down if it has to, but never scale up to be larger than the original size.
The HTML element allows you to define different images for different browser window sizes.
↓↓
3: Responsive Text Size
The text size can be set with a "viewport width" or"vw" unit.
In that way, the text size would follow the size of the browser window.
Responsive Website Design method using CSS
↓↓
1: Flex Layout
Establishing a simple <display:flex;>
layout in our main container and further styling with media query for mobile and desktop can easily create a responsive webpage.
Read more on Flex Layout
↓↓
2: Media query
With media queries you can define completely different styles for different browser sizes.
Find more on media query
I know🥲
Top comments (23)
Nice article! 👍
Few things that I’d like to mention
clamp()
approachI think you can also call it responsive too😂😂
Also what you said about building with the mobile first in mind is something I've also adopted.
Thank you for contributing, I'll read more on your contribution and hopefully update my post
😊 Thank you
why the images of code? it makes it impossible to just copy the code we are interested in
use blackbox chrome extension to copy code from Image, and thank me later
youtu.be/ivJMSXzCvM4
This is a gem😁😁Thank you.
Thank you
Solid point.
Maybe, next time and if it calls for it, I'll attach written codes for those who'll love to make copies.
Lovely article with colorful content.Thank you for sharing!
Thank youuu🫂🫂
This is really helpful!
I'm glad you found it helpful. Thank you for reading 😊
Fun article.
Thank you!
Nice article! 👍
Thank you for reading
Thank you, I found this very useful since I just found out I was doing responsive text wrong, again thanks!
I'm really glad you found it useful ☺️☺️
Thank you.
The article was really nice and also fun to read.
Thank you Somtochukwu☺️☺️
Brother, you made good publish. Thnx man!
Thank you!!!
NICE
Thank you Kachi!