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π₯²
Oldest comments (23)
Lovely article with colorful content.Thank you for sharing!
Thank youuuπ«π«
Fun article.
Thank you!
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.
Brother, you made good publish. Thnx man!
Thank you!!!
The article was really nice and also fun to read.
Thank you SomtochukwuβΊοΈβΊοΈ
why the images of code? it makes it impossible to just copy the code we are interested in
Solid point.
Maybe, next time and if it calls for it, I'll attach written codes for those who'll love to make copies.
Thank you
use blackbox chrome extension to copy code from Image, and thank me later
youtu.be/ivJMSXzCvM4
This is a gemππThank you.
NICE
Thank you Kachi!
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
This is really helpful!
I'm glad you found it helpful. Thank you for reading π
Nice article! π
Thank you for reading