Responsive Web Design
Before the 1 step, this is the code in the <head></head> of the page, viewport meta tag optimized for mobile (this transforms the page for mobile):
<meta name="viewport" content="width=device-width, initial-scale=1.0"> *
This is one way to make a page responsive, there are many other ways.
TLDR
Responsive web design is a technique that makes websites fit different screen sizes. We use CSS to make designs responsive by setting the width of the element to 100% and adding a maximum limit to its width using max-width. This allows the element to adapt to different screen sizes without overflow.
Responsive web design is a technique used to ensure that websites can adapt to different screen sizes.
This is achieved using CSS, to make a design responsive, we follow these steps:
1. Set the width of the element to 100%. This means that the element will take up the entire width of the screen, regardless of its size. For example, we can use the following code:
div { width: 100%; }
2. Next, we add a maximum width, it's width limit of the element using "max-width". This is like a segment with a width that we need. For instance, we can set a maximum width of 500 pixels using the following code:
div { max-width: 500px; }
3. Now we combine the two rules as follows:
div {
width: 100%;
max-width: 500px;
border: 1px solid red;
height: 50px;
}
4. With these rules in place, the element will have a maximum width of 500 pixels as indicated in the second step (for design). If the width of the screen decreases, the first rule (width: 100%) will come into effect, and the element will occupy the full width of the screen without overflow element (100% - all free space) - responsive design.
In conclusion, with this method responsive design involves stretching the element using percent and adding a limit to its width, thereby enabling it to adapt to different screen sizes without overflow element. This is only one of the techniques.
Source:
*
https://www.w3schools.com/html/html_responsive.asp
*
https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
Other:
https://www.w3schools.com/html/html_responsive.asp
https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design