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" />
@media(max-width: 500px){
p {
color: red;
}
}
@media(min-width: 500px){
p {
color: blue;
}
}
img {
max-width:100%;
height: auto;
display: inline-block;
}
.wrapper {
width: 100%;
max-width: 560px;
margin: 0 auto;
}
@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; }
}
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 Doc: