An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Creating Responsive Website Design.
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
Original Link: https://dev.to/prudence97/creating-responsive-website-design-1mik
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To