Responsive Web Design
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%), "vw", "1fr"
- "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:
@media(max-width: 500px){
p {
color: red;
}
}
2. This CSS code prevents images from overflowing and sets the automatic size for the picture:
img {
max-width:100%;
height: auto;
display: inline-block;
}
3. 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;
}
4. 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; }
}
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