CSS Responsive Design Concepts
Published at Jul 15, 2023
- Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- Media Query Orientation
.box {
background: red;
height: 100px;
width: 100px;
}
/* orientation: landscape or portrait */
@media (min-width: 500px) and (orientation: landscape) {
.box {
background: blue;
}
}
- Media Query Aspect Ratio
.box {
background: red;
height: 100px;
width: 100px;
}
/* 16 / 9 */
@media (min-aspect-ratio: 1 / 1) {
.box {
background: blue;
}
}
- Media Query Ranges
.box {
background: red;
height: 100px;
width: 100px;
}
@media (100px <= width <= 300px) {
.box {
background: blue;
}
}
- Container Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="main">
<div class="box"></div>
</div>
<div class="sidebar">
<div class="box"></div>
</div>
</body>
</html>
.main {
flex-grow: 1;
}
.sidebar {
width: 30%;
border-left: 1px solid black;
}
.main,
.sidebar {
container-type: inline-size;
}
@container (width >= 400px) {
.box {
background: red;
}
}
- Custom Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
.box {
background: red;
height: 100px;
width: 100px;
margin: 20px;
}
@custom-media --big (width >= 500px);
@media (--small) {
.box {
background: blue;
}
}
- Different HTML for mobile/desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box mobile-only desktop-only"></div>
</body>
</html>
.box {
background: red;
height: 100px;
width: 100px;
margin: 20px;
}
@custom-media --big (width >= 500px);
@media (--small) {
.mobile-only {
display: none;
}
}
@media (--big) {
.desktop-only {
display: none;
}
}
/* I think he mixed up things above */
- CSS Grid
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
body {
display: flex;
margin: 0;
}
.box {
background: red;
/* height: 100px; */
width: 100px;
/* margin: 20px; */
}
.grid {
width: 100%;
display: grid;
gap: 1rem;
/* grid-template-columns: repeat(3, 1fr)); */
/* auto-fit or auto-fill */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* rows or cols - substitutes hardcoded height or width */
grid-auto-rows: 100px;
}
- Clamp
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
body {
display: flex;
margin: 0;
}
.box {
background: red;
height: 200px;
/* min, normal, max */
min-width: 100px;
width: 75%;
max-width: 500px;
/* exact same result with clamp: */
/* it can be used for height, font-size as well */
width: clamp(100px, 75%, 500px);
/* example: */
font-size: clamp(1rem, 5vw, 2rem);
}
- Viewport Units
SEE References
.box-1 {
background-color: green;
height: 100vh;
}
.box-2 {
background-color: blue;
height: 100svh;
}
.box-3 {
background-color: coral;
height: 100lvh;
}
.box-4 {
background-color: grey;
height: 100dvh;
}