Beginning:

Responsive web design is a web design or CSS style that makes a website look good on any screen size.

Note: The most popular responsive design technique is "Mobile First Design".

To make the page optimized for mobile devices, first use this meta tag in the "head"
Сode:
<meta name="viewport" content="width=device-width, initial-scale=1" />

CSS Responsive Design can be achieved by using:

• CSS units as percentages "%" (100%), "1fr" (for grid). "vw".
• "media query".
• CSS property: "max-width", "min-width".
• Maybe something else.

A few of my own examples of what I use:

1. If the width of the screen is 500 pixels or less, we do something, or if it is more than 500 pixels, we do something else.

@media(max-width: 500px){
p {
color: red;
}
}

@media(min-width: 500px){
p {
color: blue;
}
}

1. This CSS code prevents images from overflowing and sets the automatic size for the picture:

img {
max-width:100%;
height: auto;
display: inline-block;
}

1. My responsive content or page "wrapper" class. This wrapper in the example makes the content no wider than 560px and a width of 100% makes it adaptive to any screen:

.wrapper {
width: 100%;
max-width: 560px;
margin: 0 auto;
}

1. Hide 1 and show 2 something depending on the screen size or dynamic style change. Hide the desktop version and show the mobile version of something instead. (A drop down menu or something else):

@media(width >= 500px){
p { color: red; }
}

@media(width <= 500px){
p { color: green; }
}

or

@media(width >= 500px){
.mobileVersion { display: none; }
.desktopVersion { display: block; color: red }
}

@media(width <= 500px){
.mobileVersion { display: block; color: green; }
.desktopVersion { display: none; }
}

1. Personal experience and advice or technique:

I write CSS styles simultaneously for any screen, my method is the method of overriding the style above with the style below (hierarchy in CSS), for example, there is a regular style for large screens:

.testClass { color: red; }

Then under it I add the same CSS class and properties from the style above with values for other screens using CSS Media Queries:

.testClass { color: red; }

@media (max-width: 500px) {
.testClass { color: orange; }
}

@media (max-width: 300px) {
.testClass { color: blue; }
}

@media (max-width: 100px) {
.testClass { color: yellow; }
}

so I override the style above and create a new style with overriding method for screens that are not larger than 500 pixels, then for 200px with overwriting , then for 100px etc

1. Note, testing and debugging:

• Resize the browser window to see the style changes.
• Launch the developer tool in the browser through the menu and "Inspect" page and change the size of the window there.
• In developer tools, you can choose mobile phone simulation: "Responsive Design Mode" (phone icon).
• Of course, a test on a physical device.

Source and Learning:

• Responsive design - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design
• Responsive web design basics | Articles | web.dev - https://web.dev/articles/responsive-web-design-basics
• Mobile-First CSS: Is It Time for a Rethink? – A List Apart - https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/

Doc:

• Viewport meta tag - HTML: HyperText Markup Language | MDN - https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
• Beginner's guide to media queries - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries
• Using media queries - CSS: Cascading Style Sheets | MDN - https://developer.mozilla.org/docs/Web/CSS/CSS_media_queries/Using_media_queries CSS values and units - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units